import { MANTINE_TOKENS, isHex } from "./_mantine_color_helpers";

/**
 * Genera el valor CSS para el fondo de un elemento con color de tarjeta Mantine.
 *
 * - Sin color (""): fondo base dark-6.
 * - Hex (#rgb/#rrggbb): mezcla 18% del hex con dark-6.
 * - Token Mantine (blue, red, ...): mezcla 18% del tono -9 con dark-6.
 * - Valor desconocido: fondo base dark-6.
 */
export function colorBg(color: string): string {
  if (!color) return "var(--mantine-color-dark-6)";
  if (isHex(color)) return `color-mix(in srgb, ${color} 18%, var(--mantine-color-dark-6))`;
  if (MANTINE_TOKENS.has(color)) return `color-mix(in srgb, var(--mantine-color-${color}-9) 18%, var(--mantine-color-dark-6))`;
  return "var(--mantine-color-dark-6)";
}
