// @design-system: domain/VendorLogoFallback

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

export type VendorLogoFallbackSize = 'sm' | 'md' | 'lg';

export interface VendorLogoFallbackProps {
  /**
   * Vendor display name — first letter rendered as initial.
   * Picks first non-whitespace character, falls back to '?'.
   */
  name: string;
  /**
   * Size preset matching real logo footprint:
   * - `sm` — 48 px (inline variant, size-12)
   * - `md` — 56 px (sidebar variant, size-14) — **default**
   * - `lg` — 80 px (hero / profile page, size-20)
   */
  size?: VendorLogoFallbackSize;
  className?: string;
}

const sizeClasses: Record<VendorLogoFallbackSize, string> = {
  sm: 'size-12 text-lg',
  md: 'size-14 text-xl',
  lg: 'size-20 text-2xl',
};

/**
 * VendorLogoFallback — initial-letter circle shown when a vendor has no approved logo.
 *
 * Renders a branded `bg-brand-primary-100` circle with the first character of the
 * vendor's display name in `text-brand-primary-700`. Sizes align to the real logo
 * footprint used in `BusinessProfile` (inline `sm`, sidebar `md`) and profile page (`lg`).
 *
 * RTL-identical: circle + letter layout is direction-agnostic.
 * A11y: uses `role="img"` + `aria-label` from `vendor_profile.vendor_logo_fallback_alt`.
 *
 * @example
 * ```tsx
 * {vendor.logoUrl
 *   ? <Image src={vendor.logoUrl} alt="" ... />
 *   : <VendorLogoFallback name={vendor.displayName ?? vendor.businessName} />}
 * ```
 */
export function VendorLogoFallback({ name, size = 'md', className }: VendorLogoFallbackProps) {
  const t = useT('vendor_profile');
  const initial = name.trim().charAt(0).toUpperCase() || '?';

  return (
    <span
      role="img"
      aria-label={t('vendor_logo_fallback_alt')}
      className={cn(
        'bg-brand-primary-100 text-brand-primary-700 inline-flex shrink-0 items-center justify-center rounded-xl font-bold',
        sizeClasses[size],
        className,
      )}
    >
      {initial}
    </span>
  );
}