import { cn } from '@/lib/cn';
import { useMessages } from '@/i18n/client';

export interface CoreNumber {
  label: string;
  value: number;
  title: string;
  tone: 'blue' | 'violet' | 'amber';
}

const TONE: Record<CoreNumber['tone'], string> = {
  blue: 'text-num-blue bg-num-blue/[0.07] ring-num-blue/15',
  violet: 'text-num-violet bg-num-violet/[0.07] ring-num-violet/15',
  amber: 'text-num-amber bg-num-amber/[0.08] ring-num-amber/20',
};

export function CoreNumbers({
  lifePath,
  lifePathTitle,
  numbers,
  className,
}: {
  lifePath: number;
  lifePathTitle: string;
  numbers: CoreNumber[];
  className?: string;
}) {
  const t = useMessages().insights;
  return (
    <div className={cn('flex flex-col items-center', className)}>
      <div className="flex size-[132px] flex-col items-center justify-center rounded-full bg-[radial-gradient(circle_at_35%_30%,#FFFFFF,#EEF0FF_55%,#E4E1FF)] text-center shadow-[inset_0_0_0_1px_rgba(91,108,255,0.12),0_12px_32px_-12px_rgba(91,108,255,0.35)]">
        <span className="text-[52px] leading-none font-light tracking-tight text-ink tabular-nums">
          {lifePath}
        </span>
        <span className="mt-2 text-[10px] font-medium text-muted">{t.lifePath}</span>
        <span className="text-[10px] text-subtle">{lifePathTitle}</span>
      </div>

      <div className="mt-6 grid w-full grid-cols-3 gap-2 text-center">
        {numbers.map((n) => (
          <div key={n.label} className="flex flex-col items-center">
            <span
              className={cn(
                'flex size-11 items-center justify-center rounded-full text-lg font-light ring-1 tabular-nums',
                TONE[n.tone],
              )}
            >
              {n.value}
            </span>
            <span className="mt-2 text-[11px] font-medium text-ink-soft">{n.label}</span>
            <span className="text-[10px] text-subtle">{n.title}</span>
          </div>
        ))}
      </div>
    </div>
  );
}