import 'package:flutter/material.dart';

class ColorSelector extends StatelessWidget {
  final String selectedColor;
  final List<String> colors;
  final void Function(String) onColorSelected;

  const ColorSelector({
    super.key,
    required this.selectedColor,
    required this.colors,
    required this.onColorSelected,
  });

  Color _getColorFromString(String colorName) {
    final colorMap = {
      'red': Colors.red,
      'blue': Colors.blue,
      'green': Colors.green,
      'yellow': Colors.yellow,
      'black': Colors.black,
      'white': Colors.white,
      'orange': Colors.orange,
      'purple': Colors.purple,
      'pink': Colors.pink,
      'grey': Colors.grey,
      'brown': Colors.brown,
      'wood' : Colors.brown[300]!,
    };
    return colorMap[colorName.toLowerCase()] ?? Colors.grey;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Farbe',
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w600,
            color: Colors.grey.shade700,
          ),
        ),
        SizedBox(height: 12),
        Wrap(
          spacing: 12,
          runSpacing: 12,
          children: colors.map((colorName) {
            final isSelected = selectedColor.toLowerCase() == colorName.toLowerCase();
            final color = _getColorFromString(colorName);
            
            return GestureDetector(
              onTap: () => onColorSelected(colorName),
              child: AnimatedContainer(
                duration: Duration(milliseconds: 200),
                width: isSelected ? 60 : 50,
                height: isSelected ? 60 : 50,
                decoration: BoxDecoration(
                  color: color,
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: isSelected ? Colors.blue : Colors.grey.shade300,
                    width: isSelected ? 3 : 2,
                  ),
                  boxShadow: [
                    if (isSelected)
                      BoxShadow(
                        color: color.withAlpha(102),
                        blurRadius: 12,
                        spreadRadius: 2,
                      ),
                  ],
                ),
                child: isSelected
                    ? Icon(
                        Icons.check,
                        color: _isLightColor(color) ? Colors.black : Colors.white,
                        size: 28,
                      )
                    : null,
              ),
            );
          }).toList(),
        ),
        SizedBox(height: 8),
        Text(
          'Ausgewählt: $selectedColor',
          style: TextStyle(
            fontSize: 12,
            color: Colors.grey.shade600,
            fontStyle: FontStyle.italic,
          ),
        ),
      ],
    );
  }

  bool _isLightColor(Color color) {
    final luminance = color.computeLuminance();
    return luminance > 0.5;
  }
}
