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

type MetricCardProps = {
  label: string;
  value: string;
  delta?: string;
  positive?: boolean;
  className?: string;
};

export function MetricCard({ label, value, delta, positive = true, className }: MetricCardProps) {
  return (
    <div className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4', className)}>
      <p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">{label}</p>
      <p className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
      {delta ? (
        <p className={cn('mt-2 text-xs', positive ? 'text-[#96f5bf]' : 'text-[#ff9898]')}>
          {delta}
        </p>
      ) : null}
    </div>
  );
}