'use client';

/* KpiCardMobile — phase 03 (DASH-01).
 *
 * Phone-sized KPI card for the 2×2 dashboard grid. Renders a label,
 * a large numeric value, and an optional caption. tone="attention"
 * adds a left-edge destructive border for SLA breaches > 0.
 *
 * Pure presentational — no fetch, no state. Parent provides values. */

import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export type KpiTone = 'default' | 'attention';

interface KpiCardMobileProps {
  label: string;
  value: number | string;
  caption?: string;
  tone?: KpiTone;
}

const TONE_BORDER: Record<KpiTone, string> = {
  default: 'border-l-transparent',
  attention: 'border-l-destructive',
};

export function KpiCardMobile({ label, value, caption, tone = 'default' }: KpiCardMobileProps) {
  const display = typeof value === 'number' ? value.toLocaleString() : value;
  return (
    <Card className={cn('h-full border-l-2', TONE_BORDER[tone])}>
      <CardContent className="p-4 flex flex-col gap-1">
        <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">{label}</p>
        <p className="text-3xl font-bold tabular-nums">{display}</p>
        {caption && <p className="text-xs text-muted-foreground">{caption}</p>}
      </CardContent>
    </Card>
  );
}