import { Sparkline } from './Sparkline';

interface Props {
  label: string;
  value: string;
  trend?: number[];
  hint?: string;
  accent?: 'primary' | 'amber' | 'neutral';
}

const ACCENT_COLORS: Record<NonNullable<Props['accent']>, { stroke: string; fill: string }> = {
  primary: { stroke: '#2563EB', fill: 'rgba(37, 99, 235, 0.08)' },
  amber: { stroke: '#D97706', fill: 'rgba(245, 158, 11, 0.10)' },
  neutral: { stroke: '#64748B', fill: 'rgba(100, 116, 139, 0.08)' },
};

export function StatCard({ label, value, trend, hint, accent = 'primary' }: Props) {
  const colors = ACCENT_COLORS[accent];
  return (
    <div className="harta-card">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 flex-1">
          <div className="harta-card-label">{label}</div>
          <div className="harta-card-value tabular-nums">{value}</div>
          {hint && <div className="harta-card-hint">{hint}</div>}
        </div>
        {trend && trend.length > 1 && (
          <div className="opacity-80 shrink-0">
            <Sparkline values={trend} width={60} height={18} stroke={colors.stroke} fill={colors.fill} />
          </div>
        )}
      </div>
    </div>
  );
}
