"use client";

import { Icon } from "@/components/ui/Icon";

// Zentrale Avaria-Farbpalette für Boards, Spalten, Karten, Teams …
export const PALETTE = [
  "#9ed7ff",
  "#38bdf8",
  "#c8bcff",
  "#bec6ff",
  "#ff9fd7",
  "#ff7a9c",
  "#7ee787",
  "#a0f0e0",
  "#ffc36b",
  "#8aa0c8",
];

/** Reihe klickbarer Farbfelder. `value === null` bedeutet „keine Farbe“. */
export function Swatches({
  value,
  onChange,
  allowNone = false,
}: {
  value: string | null;
  onChange: (color: string | null) => void;
  allowNone?: boolean;
}) {
  return (
    <div className="swatch-row">
      {allowNone ? (
        <button
          type="button"
          className="swatch swatch-none"
          data-active={!value}
          onClick={() => onChange(null)}
          title="Keine Farbe"
        >
          <Icon name="close" size={13} />
        </button>
      ) : null}
      {PALETTE.map((c) => (
        <button
          key={c}
          type="button"
          className="swatch"
          data-active={value?.toLowerCase() === c.toLowerCase()}
          style={{ background: c }}
          onClick={() => onChange(c)}
          title={c}
        >
          {value?.toLowerCase() === c.toLowerCase() ? <Icon name="check" size={13} /> : null}
        </button>
      ))}
    </div>
  );
}