// POP 9-color palette. 키는 부위별 완성 리터럴 — JIT 스캔 대상.
// 동적 문자열 생성 금지(`bg-${x}` 등). 반드시 COLOR_MAP[color].부위 조회로 접근.

export type PopColor =
  | 'blue'
  | 'purple'
  | 'cyan'
  | 'green'
  | 'red'
  | 'pink'
  | 'teal'
  | 'orange'
  | 'amber';

export interface PopColorTokens {
  buttonBg: string;
  buttonBgHover: string;
  ring: string;
  ringSelected: string;
  text: string;
  bg50: string;
  border: string;
}

export const COLOR_MAP: Record<PopColor, PopColorTokens> = {
  blue: {
    buttonBg: 'bg-gradient-to-b from-blue-400 to-blue-700',
    buttonBgHover: 'hover:from-blue-500 hover:to-blue-800',
    ring: 'focus:ring-blue-500',
    ringSelected: 'ring-2 ring-blue-500',
    text: 'text-blue-600',
    bg50: 'bg-blue-50',
    border: 'border-blue-200',
  },
  purple: {
    buttonBg: 'bg-gradient-to-b from-purple-400 to-purple-700',
    buttonBgHover: 'hover:from-purple-500 hover:to-purple-800',
    ring: 'focus:ring-purple-500',
    ringSelected: 'ring-2 ring-purple-500',
    text: 'text-purple-600',
    bg50: 'bg-purple-50',
    border: 'border-purple-200',
  },
  cyan: {
    buttonBg: 'bg-gradient-to-b from-cyan-400 to-cyan-700',
    buttonBgHover: 'hover:from-cyan-500 hover:to-cyan-800',
    ring: 'focus:ring-cyan-500',
    ringSelected: 'ring-2 ring-cyan-500',
    text: 'text-cyan-600',
    bg50: 'bg-cyan-50',
    border: 'border-cyan-200',
  },
  green: {
    buttonBg: 'bg-gradient-to-b from-green-400 to-green-700',
    buttonBgHover: 'hover:from-green-500 hover:to-green-800',
    ring: 'focus:ring-green-500',
    ringSelected: 'ring-2 ring-green-500',
    text: 'text-green-600',
    bg50: 'bg-green-50',
    border: 'border-green-200',
  },
  red: {
    buttonBg: 'bg-gradient-to-b from-red-400 to-red-700',
    buttonBgHover: 'hover:from-red-500 hover:to-red-800',
    ring: 'focus:ring-red-500',
    ringSelected: 'ring-2 ring-red-500',
    text: 'text-red-600',
    bg50: 'bg-red-50',
    border: 'border-red-200',
  },
  pink: {
    buttonBg: 'bg-gradient-to-b from-pink-400 to-pink-700',
    buttonBgHover: 'hover:from-pink-500 hover:to-pink-800',
    ring: 'focus:ring-pink-500',
    ringSelected: 'ring-2 ring-pink-500',
    text: 'text-pink-600',
    bg50: 'bg-pink-50',
    border: 'border-pink-200',
  },
  teal: {
    buttonBg: 'bg-gradient-to-b from-teal-400 to-teal-700',
    buttonBgHover: 'hover:from-teal-500 hover:to-teal-800',
    ring: 'focus:ring-teal-500',
    ringSelected: 'ring-2 ring-teal-500',
    text: 'text-teal-600',
    bg50: 'bg-teal-50',
    border: 'border-teal-200',
  },
  orange: {
    buttonBg: 'bg-gradient-to-b from-orange-400 to-orange-700',
    buttonBgHover: 'hover:from-orange-500 hover:to-orange-800',
    ring: 'focus:ring-orange-500',
    ringSelected: 'ring-2 ring-orange-500',
    text: 'text-orange-600',
    bg50: 'bg-orange-50',
    border: 'border-orange-200',
  },
  amber: {
    buttonBg: 'bg-gradient-to-b from-amber-400 to-amber-700',
    buttonBgHover: 'hover:from-amber-500 hover:to-amber-800',
    ring: 'focus:ring-amber-500',
    ringSelected: 'ring-2 ring-amber-500',
    text: 'text-amber-600',
    bg50: 'bg-amber-50',
    border: 'border-amber-200',
  },
};
