export const STATE_PANEL_TONES = [
  'slate',
  'red',
  'violet',
  'pink',
  'sky',
  'cyan',
  'orange',
  'indigo',
] as const;

export type StatePanelTone = (typeof STATE_PANEL_TONES)[number];

export const statePanelToneClasses: Record<
  StatePanelTone,
  {
    readonly panel: string;
    readonly icon: string;
    readonly iconBackground: string;
    readonly title: string;
    readonly message: string;
  }
> = {
  slate: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-slate-700/40',
    icon: 'text-slate-500',
    iconBackground: 'bg-slate-700/40',
    title: 'text-white',
    message: 'text-slate-400',
  },
  red: {
    panel: 'bg-red-500/10 border-red-500/30',
    icon: 'text-red-300',
    iconBackground: 'bg-red-500/15',
    title: 'text-red-200',
    message: 'text-red-300',
  },
  violet: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-slate-700/40',
    icon: 'text-violet-400',
    iconBackground: 'bg-violet-500/15',
    title: 'text-white',
    message: 'text-slate-400',
  },
  pink: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-slate-700/40',
    icon: 'text-pink-400',
    iconBackground: 'bg-pink-500/15',
    title: 'text-white',
    message: 'text-slate-400',
  },
  sky: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-slate-700/40',
    icon: 'text-sky-400',
    iconBackground: 'bg-sky-500/15',
    title: 'text-white',
    message: 'text-slate-400',
  },
  cyan: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-cyan-500/20',
    icon: 'text-cyan-400',
    iconBackground: 'bg-cyan-500/15',
    title: 'text-white',
    message: 'text-slate-300',
  },
  orange: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-slate-700/40',
    icon: 'text-orange-500',
    iconBackground: 'bg-orange-500/15',
    title: 'text-white',
    message: 'text-slate-400',
  },
  indigo: {
    panel: 'bg-slate-800/40 backdrop-blur-sm border-slate-700/40',
    icon: 'text-indigo-400',
    iconBackground: 'bg-indigo-500/20',
    title: 'text-white',
    message: 'text-slate-500',
  },
};

export const statePanelSizeClasses = {
  md: 'p-5',
  lg: 'p-12',
  inline: 'px-4 py-3',
} as const;

export type StatePanelSize = keyof typeof statePanelSizeClasses;

export const statePanelAlignmentClasses = {
  start: 'items-start text-left',
  center: 'items-center text-center',
} as const;

export type StatePanelAlignment = keyof typeof statePanelAlignmentClasses;
