// 紧凑型统计条 — 替代 4~5 个大卡片的笨重布局
// 一行显示所有统计项，带颜色区分
import { cn } from '@/lib/utils';

interface StatItem {
  label: string;
  value: number | string;
  color?: string; // tailwind text class or hex
  icon?: React.ReactNode;
}

interface StatStripProps {
  items: StatItem[];
  className?: string;
}

const colorMap: Record<string, { text: string; bg: string }> = {
  blue:    { text: 'text-blue-400',   bg: 'bg-blue-500/20' },
  emerald: { text: 'text-emerald-400', bg: 'bg-emerald-500/20' },
  amber:   { text: 'text-amber-400',  bg: 'bg-amber-500/20' },
  red:     { text: 'text-red-400',    bg: 'bg-red-500/20' },
  purple:  { text: 'text-purple-400', bg: 'bg-purple-500/20' },
  cyan:    { text: 'text-cyan-400',   bg: 'bg-cyan-500/20' },
  muted:   { text: 'text-[var(--dg-text-secondary)]', bg: 'bg-[var(--dg-bg-tertiary)]' },
};

export function StatStrip({ items, className }: StatStripProps) {
  return (
    <div className={cn(
      'flex items-center gap-1.5 px-3 py-2 rounded-lg',
      'bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]',
      'overflow-x-auto',
      className,
    )}>
      {items.map((item, i) => {
        const clr = colorMap[item.color || 'muted'] || colorMap.muted;
        return (
          <div key={i} className="flex items-center gap-1.5 shrink-0">
            {i > 0 && (
              <span className="w-px h-5 bg-[var(--dg-border)] mx-1 shrink-0" />
            )}
            <span className={cn(
              'w-1.5 h-1.5 rounded-full shrink-0',
              clr.bg.replace('/20', '').replace('bg-', 'bg-') || 'bg-slate-500',
            )}
              style={{ backgroundColor: item.color?.startsWith('#') ? item.color : undefined }}
            />
            <span className="text-xs text-[var(--dg-text-muted)]">{item.label}</span>
            <span className={cn('text-sm font-semibold', clr.text)}>{item.value}</span>
          </div>
        );
      })}
    </div>
  );
}