import { COLORS, type ColorId } from "@/data/lists";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export function ColorPicker({
  value,
  onChange,
}: {
  value: ColorId;
  onChange: (c: ColorId) => void;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {COLORS.map((c) => (
        <button
          key={c.id}
          type="button"
          onClick={() => onChange(c.id)}
          title={c.name}
          className={cn(
            "w-9 h-9 rounded-full flex items-center justify-center transition-all ring-offset-2 ring-offset-background hover:scale-110",
            value === c.id && "ring-2 ring-foreground/40 scale-110",
          )}
          style={{ backgroundColor: c.hex }}
        >
          {value === c.id && <Check className="w-4 h-4 text-white drop-shadow" />}
        </button>
      ))}
    </div>
  );
}
