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

class ModeSelectionBlock extends StatefulWidget {
  final List<Map<String, dynamic>> modeData;
  final Function(int) onSelectMode;

  const ModeSelectionBlock({
    super.key,
    required this.modeData,
    required this.onSelectMode,
  });

  @override
  State<ModeSelectionBlock> createState() => _ModeSelectionBlockState();
}

class _ModeSelectionBlockState extends State<ModeSelectionBlock> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24.r),
        color: Colors.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '模式选择',
            style: TextStyle(
              fontSize: 28.sp,
              fontWeight: FontWeight.bold,
              color: const Color.fromRGBO(31, 41, 55, 1),
            ),
          ),
          SizedBox(height: 20.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: widget.modeData.asMap().entries.map((entry) {
              final index = entry.key;
              final mode = entry.value;
              final isSelected = mode['isSelected'] as bool;
              return GestureDetector(
                onTap: () => widget.onSelectMode(index),
                child: Container(
                  width: 120.w,
                  padding: EdgeInsets.symmetric(vertical: 16.h),
                  decoration: BoxDecoration(
                    color: isSelected
                        ? const Color.fromRGBO(59, 130, 246, 1)
                        : const Color.fromRGBO(229, 231, 235, 1),
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                  child: Column(
                    children: [
                      Icon(
                        mode['icon'] as IconData,
                        color: isSelected
                            ? Colors.white
                            : const Color.fromRGBO(107, 114, 128, 1),
                        size: 32.sp,
                      ),
                      SizedBox(height: 8.h),
                      Text(
                        mode['name'] as String,
                        style: TextStyle(
                          fontSize: 22.sp,
                          color: isSelected
                              ? Colors.white
                              : const Color.fromRGBO(107, 114, 128, 1),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}