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

/// Pencil Component/SectionCard — 分组卡片容器
///
/// 带标题头(16号/600字重)和右侧可选操作按钮，内容区可放任意Widget列表。
/// 圆角8，背景bgCard，padding 16，gap 16。
class SectionCard extends StatelessWidget {
  final String title;
  final String? actionText;
  final IconData? actionIcon;
  final VoidCallback? onActionTap;
  final List<Widget> children;
  final bool showAction;

  const SectionCard({
    super.key,
    required this.title,
    this.actionText,
    this.actionIcon,
    this.onActionTap,
    required this.children,
    this.showAction = true,
  });

  @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: [
              Text(
                title,
                style: TextStyle(
                  fontSize: AppFontSizes.subtitle,
                  fontWeight: FontWeight.w600,
                  color: colors.textPrimary,
                ),
              ),
              if (showAction && (actionText != null || actionIcon != null))
                GestureDetector(
                  onTap: onActionTap,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (actionText != null)
                        Text(
                          actionText!,
                          style: TextStyle(
                            fontSize: AppFontSizes.body,
                            color: colors.textSecondary,
                          ),
                        ),
                      if (actionIcon != null) ...[
                        const SizedBox(width: 2),
                        Icon(
                          actionIcon,
                          size: 16,
                          color: colors.textSecondary,
                        ),
                      ],
                    ],
                  ),
                ),
            ],
          ),
          // 分隔线
          if (children.isNotEmpty) ...[
            const SizedBox(height: 16),
            ...children,
          ],
        ],
      ),
    );
  }
}
