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('min-w-0 border-t border-[color:var(--line-weak)] pt-3', className)}>
      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{label}</p>
      <p className="mt-2 text-3xl 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>
  );
}
