import type { CardColor } from "../types";
import { stringHashPalette } from "@fn_library/core/string_hash_palette";

export { colorBg } from "@fn_library/ui/color_bg";
export { colorBorder } from "@fn_library/ui/color_border";
export { colorSwatch } from "@fn_library/ui/color_swatch";

// 22 colores fijos (default + 21 distintos). El ColorPickerGrid añade un 23º circulo "+"
// que abre el ColorPicker libre para hex personalizado.
export const CARD_COLORS: { value: CardColor; label: string }[] = [
  { value: "", label: "Default" },
  { value: "blue", label: "Azul" },
  { value: "cyan", label: "Cian" },
  { value: "teal", label: "Teal" },
  { value: "green", label: "Verde" },
  { value: "lime", label: "Lima" },
  { value: "yellow", label: "Amarillo" },
  { value: "orange", label: "Naranja" },
  { value: "red", label: "Rojo" },
  { value: "pink", label: "Rosa" },
  { value: "grape", label: "Uva" },
  { value: "violet", label: "Violeta" },
  { value: "indigo", label: "Indigo" },
  { value: "gray", label: "Gris" },
  { value: "#0ea5e9", label: "Sky" },
  { value: "#14b8a6", label: "Esmeralda" },
  { value: "#84cc16", label: "Lima fluor" },
  { value: "#ec4899", label: "Magenta" },
  { value: "#a855f7", label: "Lavanda" },
  { value: "#f97316", label: "Mandarina" },
  { value: "#dc2626", label: "Rubi" },
  { value: "#0891b2", label: "Petroleo" },
  { value: "#fde047", label: "Limon" },
  { value: "#10b981", label: "Menta" },
  { value: "#fb7185", label: "Coral" },
  { value: "#6366f1", label: "Iris" },
  { value: "#94a3b8", label: "Pizarra" },
];

export const AVATAR_COLORS = CARD_COLORS;

const TAG_PALETTE = ["blue", "cyan", "teal", "green", "lime", "yellow", "orange", "red", "pink", "grape", "violet", "indigo"];

export function tagColor(tag: string): string {
  return stringHashPalette(tag, TAG_PALETTE);
}
