// @design-system: domain/DealsBrowser/GalleryView
// Pure gallery grid for deal cards. Extracted from DealsGridIsland so it can
// be reused in NearYouIsland (feed-mode) without pulling in the /deals browse logic.

'use client';

import { DealCard, type DealCardDeal } from '@/components/ui/domain/DealCard';
import { Grid } from '@/components/ui/layout/Grid';
import { cn } from '@/lib/cn';

export type { DealCardDeal };

export interface GalleryViewProps {
  deals: DealCardDeal[];
  loading?: boolean;
  gridLabel: string;
  emptyLabel: string;
}

/**
 * GalleryView — pure deal grid, no fetch logic.
 *
 * Renders the deal grid with optional loading opacity. Caller owns data fetching.
 * Used by NearYouIsland (feed).
 */
export function GalleryView({ deals, loading = false, gridLabel, emptyLabel }: GalleryViewProps) {
  return (
    <div aria-live="polite" aria-label={gridLabel}>
      <div
        className={cn('transition-opacity duration-200', loading ? 'opacity-60' : 'opacity-100')}
      >
        {deals.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <p className="text-text-muted text-lg">{emptyLabel}</p>
          </div>
        ) : (
          <Grid cols={1} lgCols={3} gap="4">
            {deals.map((deal) => (
              <DealCard key={deal.id} deal={deal} variant="grid" />
            ))}
          </Grid>
        )}
      </div>
    </div>
  );
}