import '../../core/theme/app_colors.dart';
import 'package:flutter/material.dart';
import '../../core/theme/app_colors_extension.dart';

/// Pencil Component/FormSection — 表单分组卡片
///
/// 标题行(16号/600字重) + 右侧可选操作按钮(带plus图标) + 内容区
class FormSection extends StatelessWidget {
  final String title;
  final IconData? leadingIcon;
  final String? actionText;
  final IconData? actionIcon;
  final VoidCallback? onActionTap;
  final bool showAction;
  final Widget? trailing;
  final List<Widget> children;

  const FormSection({
    super.key,
    required this.title,
    this.leadingIcon,
    this.actionText,
    this.actionIcon,
    this.onActionTap,
    this.showAction = false,
    this.trailing,
    required this.children,
  });

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: colors.bgCard,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  if (leadingIcon != null) ...[
                    Icon(leadingIcon, size: 18, color: colors.textPrimary),
                    const SizedBox(width: 8),
                  ],
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: AppFontSizes.title,
                      fontWeight: FontWeight.w600,
                      color: colors.textPrimary,
                    ),
                  ),
                ],
              ),
              if (trailing != null) trailing!, // ignore: prefer_null_aware_operator
              if (showAction)
                GestureDetector(
                  onTap: onActionTap,
                  behavior: HitTestBehavior.opaque,
                  child: Padding(
                    padding: const EdgeInsetsDirectional.only(start: 16, top: 6, bottom: 6),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          actionText ?? '',
                          style: TextStyle(
                            fontSize: AppFontSizes.body,
                            color: colors.primary,
                          ),
                        ),
                        const SizedBox(width: 4),
                        Icon(
                          actionIcon ?? Icons.add,
                          size: 20,
                          color: colors.primary,
                        ),
                      ],
                    ),
                  ),
                ),
            ],
          ),
          const SizedBox(height: 16),
          ...children,
        ],
      ),
    );
  }
}
