import clsx from 'clsx';

interface Props {
  label: string;
  value: string;
  sub?: string;
  accent?: 'primary' | 'success' | 'warning' | 'danger';
}

const accentColors = {
  primary: 'text-dd0c-primary',
  success: 'text-dd0c-success',
  warning: 'text-dd0c-warning',
  danger: 'text-dd0c-danger',
};

export default function StatCard({ label, value, sub, accent }: Props) {
  return (
    <div className="bg-dd0c-surface border border-dd0c-border rounded-lg p-4">
      <p className="text-xs text-dd0c-muted uppercase tracking-wide">{label}</p>
      <p className={clsx('text-2xl font-bold mt-1', accent ? accentColors[accent] : 'text-dd0c-text')}>
        {value}
      </p>
      {sub && <p className="text-xs text-dd0c-muted mt-1">{sub}</p>}
    </div>
  );
}
