/**
 * Summary stat row for the AI Overview Click Recovery segment.
 *
 * Renders three stat cards: pages affected, clicks at risk/mo, est. recoverable/mo.
 * Responsive 3-up grid (stacks to 1-up on mobile).
 */
import { memo } from 'react';

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

import type { AioRecoverySummary } from './types';

interface StatCardProps {
  label: string;
  value: string | number;
  className?: string;
}

const StatCard = memo(function StatCard({ label, value, className }: StatCardProps) {
  return (
    <div
      className={cn(
        'flex flex-col gap-0.5 rounded-lg border border-border bg-card px-4 py-3',
        className,
      )}
    >
      <span className="text-xs font-medium text-muted-foreground">{label}</span>
      <span className="text-xl font-bold tabular-nums text-foreground">
        {typeof value === 'number' ? formatNumber(value) : value}
      </span>
    </div>
  );
});

interface AioSummaryStatsProps {
  summary: AioRecoverySummary;
  className?: string;
}

export const AioSummaryStats = memo(function AioSummaryStats({
  summary,
  className,
}: AioSummaryStatsProps) {
  return (
    <div
      className={cn('grid grid-cols-1 gap-3 sm:grid-cols-3', className)}
      aria-label="AI Overview recovery summary"
    >
      <StatCard label="Pages affected" value={summary.pages} />
      <StatCard label="Clicks at risk / mo" value={summary.clicks_at_risk} />
      <StatCard label="Est. recoverable / mo" value={summary.est_recoverable} />
    </div>
  );
});