import { Panel } from '@/components/ui/Panel';
import { cn } from '@/utils/classNames';
import { formatNumber } from '@/utils/format';

export interface CatalogueStatsProps {
  readonly totalCount: number;
  readonly filteredCount: number;
  readonly favouriteCount: number;
  readonly coreCount: number;
  readonly stretchCount: number;
}

function StatCard({
  label,
  tone = 'accent',
  value
}: {
  readonly label: string;
  readonly value: number | string;
  readonly tone?: 'accent' | 'warm' | 'success';
}) {
  return (
    <div className="rounded-3xl border border-border/70 bg-surface/55 p-4">
      <dt className="text-xs font-bold uppercase tracking-[0.18em] text-subtle">{label}</dt>
      <dd
        className={cn(
          'mt-2 text-2xl font-black tracking-[-0.04em] tabular-nums',
          tone === 'accent' && 'text-accent',
          tone === 'warm' && 'text-warm',
          tone === 'success' && 'text-success',
        )}
      >
        {typeof value === 'number' ? formatNumber(value) : value}
      </dd>
    </div>
  );
}

export function CatalogueStats({
  coreCount,
  favouriteCount,
  filteredCount,
  stretchCount,
  totalCount
}: CatalogueStatsProps) {
  return (
    <Panel padding="sm">
      <dl className="grid grid-cols-2 gap-3 sm:grid-cols-5">
        <StatCard label="Library" value={totalCount} />
        <StatCard label="Visible" value={filteredCount} tone="success" />
        <StatCard label="Core" value={coreCount} />
        <StatCard label="Stretch" value={stretchCount} tone="warm" />
        <StatCard label="Saved" value={favouriteCount} tone="warm" />
      </dl>
    </Panel>
  );
}