// Preset palette shared by team + tag colors. Replaces the native
// <input type="color"> — the OS color-wheel dialog was overkill for
// "pick a badge color," and these hues read well on every theme.
// (Own file since both TeamsSection and TagsSection use it.)
const SWATCH_COLORS = ['#ef4444', '#f97316', '#f59e0b', '#10b981', '#14b8a6', '#3b82f6', '#8b5cf6', '#ec4899', '#6b7280'];

const ColorSwatchPicker = ({ value, onChange }) => {
    // A color saved before presets existed still shows as its own swatch,
    // so editing an old team/tag never silently changes its color.
    const colors = (!value || SWATCH_COLORS.includes(value)) ? SWATCH_COLORS : [...SWATCH_COLORS, value];
    return (
        <div className="color-swatch-row">
            {colors.map(c => (
                <button key={c} type="button" title={c}
                        className={`color-swatch ${value === c ? 'selected' : ''}`}
                        style={{ background: c }}
                        onClick={() => onChange(c)} />
            ))}
        </div>
    );
};