// @design-system: domain/GalleryCarousel

import { cn } from '@/lib/cn';
import { Image } from '@/components/ui/primitives/Image';
import { ScrollRow } from '@/components/ui/layout/ScrollRow';
import { useT } from '@/lib/i18n/react';

/** Gallery image shape */
export interface GalleryImage {
  id: string;
  src: string;
  alt: string;
}

/** Gallery variant */
export type GalleryVariant = 'vendor' | 'user';

/** Props for GalleryCarousel */
export interface GalleryCarouselProps {
  images: GalleryImage[];
  /** Variant controls the aria-label. @default 'vendor' */
  variant?: GalleryVariant;
  /** Additional class names. */
  className?: string;
  /**
   * When true, the first image (index 0) is loaded eagerly with high fetch priority.
   * Set when the gallery appears above the fold (e.g. deal detail hero).
   * @default false
   */
  prioritizeFirst?: boolean;
}

/**
 * GalleryCarousel - horizontal snap-scrollable image gallery.
 * Used on BusinessPage for vendor gallery and user-submitted photos.
 *
 * @example
 * ```tsx
 * <GalleryCarousel images={business.photos} variant="primary" />
 * ```
 */
export function GalleryCarousel({
  images,
  variant = 'vendor',
  className,
  prioritizeFirst = false,
}: GalleryCarouselProps) {
  const t = useT('domain_gallery');

  const ariaLabel = variant === 'vendor' ? t('vendor_gallery') : t('user_gallery');

  if (images.length === 0) return null;

  return (
    <div className={cn('w-full', className)}>
      <ScrollRow gap="3" px="4" py="2" aria-label={ariaLabel} className="scroll-smooth">
        {images.map((img, index) => (
          <div key={img.id} className="h-40 w-40 shrink-0 snap-start overflow-hidden rounded-xl">
            <Image
              src={img.src}
              alt={img.alt}
              variant="card"
              loading={prioritizeFirst && index === 0 ? 'eager' : 'lazy'}
              fetchpriority={prioritizeFirst && index === 0 ? 'high' : 'auto'}
              className="h-full w-full object-cover"
            />
          </div>
        ))}
      </ScrollRow>
    </div>
  );
}