import 'package:flutter/material.dart';

/// A row of preset color circles with a palette icon to open the full picker.
class ColorPresetBar extends StatelessWidget {
  final Color selectedColor;
  final ValueChanged<Color> onColorSelected;
  final VoidCallback onOpenFullPicker;

  const ColorPresetBar({
    super.key,
    required this.selectedColor,
    required this.onColorSelected,
    required this.onOpenFullPicker,
  });

  static const List<Color> presetColors = [
    Colors.black,
    Color(0xFFE53935), // red
    Color(0xFF1E88E5), // blue
    Color(0xFF43A047), // green
    Color(0xFFFB8C00), // orange
    Color(0xFF8E24AA), // purple
    Color(0xFF6D4C41), // brown
    Colors.white,
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        for (final color in presetColors) ...[
          MouseRegion(
            cursor: SystemMouseCursors.click,
            child: InkWell(
              onTap: () => onColorSelected(color),
              borderRadius: BorderRadius.circular(11),
              child: Container(
                width: 22,
                height: 22,
                decoration: BoxDecoration(
                  color: color,
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: selectedColor == color
                        ? Theme.of(context).colorScheme.primary
                        : Colors.grey.shade400,
                    width: selectedColor == color ? 2.5 : 1.5,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(width: 4),
        ],
        MouseRegion(
          cursor: SystemMouseCursors.click,
          child: InkWell(
            onTap: onOpenFullPicker,
            borderRadius: BorderRadius.circular(11),
            child: Container(
              width: 22,
              height: 22,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.grey.shade400, width: 1.5),
              ),
              child: const Icon(Icons.palette, size: 14, color: Colors.grey),
            ),
          ),
        ),
      ],
    );
  }
}
