import type {
  WalkthroughCheckInStat,
  WalkthroughCheckInStatTone,
} from '@/business/walkthrough/types';

const statToneClasses: Record<WalkthroughCheckInStatTone, string> = {
  indigo: 'from-indigo-400 to-indigo-600',
  violet: 'from-violet-400 to-violet-600',
  cyan: 'from-cyan-400 to-cyan-600',
  emerald: 'from-emerald-400 to-emerald-600',
};

interface WalkthroughCheckInStatsProps {
  readonly stats: readonly WalkthroughCheckInStat[];
}

export function WalkthroughCheckInStats({ stats }: WalkthroughCheckInStatsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
      {stats.map((stat) => (
        <div key={stat.id} className="bg-slate-800/40 rounded-xl border border-slate-700/40 p-3">
          <div className="flex items-center gap-2 mb-1">
            <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${statToneClasses[stat.tone]}`} />
            <p className="text-[10px] text-slate-500 uppercase tracking-wider">{stat.label}</p>
          </div>
          <p className="text-xl font-bold text-white">{stat.value}</p>
        </div>
      ))}
    </div>
  );
}
