/// Widget: Description Item
///
/// Displays a label-value pair for design request details.
library;

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

/// Description Item Widget
///
/// Shows a label and value pair with:
/// - Inline layout (label: value) for single line
/// - Stacked layout for multi-line values
/// - HTML rendering support for rich text content
/// - Theme-aware colors
class DescriptionItem extends StatelessWidget {
  const DescriptionItem({
    super.key,
    required this.label,
    required this.value,
    this.isMultiLine = false,
    this.isHtml = false,
  });

  final String label;
  final String value;
  final bool isMultiLine;
  final bool isHtml;

  Widget _buildValueWidget(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    if (isHtml) {
      return Html(
        data: value,
        style: {
          'body': Style(
            fontSize: FontSize(15),
            color: colorScheme.onSurface,
            fontWeight: FontWeight.w500,
            lineHeight: const LineHeight(1.6),
            margin: Margins.zero,
            padding: HtmlPaddings.zero,
          ),
          'p': Style(
            margin: Margins.only(bottom: 8),
          ),
          'ul': Style(
            margin: Margins.only(left: 16, bottom: 8),
          ),
          'ol': Style(
            margin: Margins.only(left: 16, bottom: 8),
          ),
          'li': Style(
            margin: Margins.only(bottom: 4),
          ),
        },
      );
    }

    return Text(
      value,
      style: TextStyle(
        fontSize: 15,
        color: colorScheme.onSurface,
        fontWeight: FontWeight.w500,
        height: 1.6,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    if (isMultiLine) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            label,
            style: TextStyle(
              fontSize: 13,
              color: colorScheme.onSurfaceVariant,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 4),
          _buildValueWidget(context),
        ],
      );
    }

    return Container(
      padding: const EdgeInsets.only(bottom: 12),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: colorScheme.surfaceContainerHighest),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 120,
            child: Text(
              label,
              style: TextStyle(
                fontSize: 13,
                color: colorScheme.onSurfaceVariant,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Expanded(
            child: _buildValueWidget(context),
          ),
        ],
      ),
    );
  }
}