// @design-system: domain/SummaryBar

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { useLocale } from '@/lib/i18n/react';
import { formatCurrency } from '@/lib/format';

/** Props for SummaryBar */
export interface SummaryBarProps {
  /** Total savings in ILS. */
  savings: number;
  /** Total number of purchases. */
  purchases: number;
  /** Number of new businesses discovered. */
  businesses: number;
  /** Additional class names. */
  className?: string;
}

/**
 * SummaryBar - blue-tinted bar with 3 metrics: saved, purchases, new businesses.
 * Used on My Purchases (FDS §4.8).
 *
 * @example
 * ```tsx
 * <SummaryBar savings={320} purchases={8} businesses={5} />
 * ```
 */
export function SummaryBar({ savings, purchases, businesses, className }: SummaryBarProps) {
  const t = useT('domain_summary');
  const { locale } = useLocale();

  return (
    <div
      className={cn(
        'bg-brand-primary-100 grid grid-cols-3 gap-px overflow-hidden rounded-xl',
        className,
      )}
      role="region"
      aria-label={t('saved')}
    >
      {/* Saved */}
      <div className="bg-brand-primary-50 flex flex-col items-center gap-0.5 px-3 py-3 text-center">
        <span className="text-brand-primary-700 text-lg font-bold">
          {formatCurrency(savings, locale)}
        </span>
        <span className="text-brand-primary-600 text-xs">{t('saved')}</span>
      </div>

      {/* Purchases */}
      <div className="bg-brand-primary-50 flex flex-col items-center gap-0.5 px-3 py-3 text-center">
        <span className="text-brand-primary-700 text-lg font-bold">{purchases}</span>
        <span className="text-brand-primary-600 text-xs">{t('purchases')}</span>
      </div>

      {/* New businesses */}
      <div className="bg-brand-primary-50 flex flex-col items-center gap-0.5 px-3 py-3 text-center">
        <span className="text-brand-primary-700 text-lg font-bold">{businesses}</span>
        <span className="text-brand-primary-600 text-xs">{t('new_businesses')}</span>
      </div>
    </div>
  );
}