import { cn } from '@/lib/utils';

export type KpiItem = {
  id: string;
  label: string;
  value: string;
  hint?: string;
  available: boolean;
};

export function KpiStrip({ items, className }: { items: KpiItem[]; className?: string }) {
  return (
    <section aria-label="Store metrics" className={cn('grid grid-cols-2 gap-2.5 sm:gap-3 lg:grid-cols-5', className)}>
      {items.map((item, index) => (
        <article
          key={item.id}
          className={cn(
            'rounded-[var(--radius-lg)] border border-border bg-card p-3.5 shadow-[var(--shadow-sm)] sm:p-4',
            index === 0 && 'col-span-2 bg-gradient-to-br from-navy-deep to-navy text-white lg:col-span-1',
          )}
        >
          <p className={cn('text-[11px] font-semibold uppercase tracking-[0.08em]', index === 0 ? 'text-white/65' : 'text-muted-foreground')}>
            {item.label}
          </p>
          <p className={cn('mt-2 text-xl font-extrabold tracking-tight sm:text-2xl', index === 0 ? 'text-white' : 'text-navy')}>
            {item.available ? item.value : '—'}
          </p>
          {item.hint && (
            <p className={cn('mt-1.5 text-[11px] leading-snug', index === 0 ? 'text-white/55' : 'text-muted-foreground')}>
              {item.hint}
            </p>
          )}
        </article>
      ))}
    </section>
  );
}