'use client';

import { useLocale, useT } from '@/lib/i18n/react';
import { DealCard, type DealCardDeal } from '@/components/ui/domain/DealCard';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import type { Config } from './config';

/**
 * deal-grid Component
 * Responsive 2-column grid of DealCard variant='grid'.
 * Handles empty states for wishlist and category sources.
 */
export function Component({
  config,
  data,
  demo,
}: {
  config: Config;
  data: unknown;
  demo?: boolean;
}) {
  const { locale } = useLocale();
  const t = useT('deal_grid');
  const deals = (data ?? []) as DealCardDeal[];
  const title = config.title ? config.title[locale] : undefined;

  if (deals.length === 0) {
    const emptyKey = config.source === 'wishlist' ? 'empty_wishlist' : 'empty_deals';
    return (
      <section aria-label={title}>
        <EmptyState title={t(emptyKey)} />
      </section>
    );
  }

  return (
    <section aria-label={title}>
      {title && <SectionHeader title={title} />}
      <div className="grid grid-cols-2 gap-3 px-6">
        {deals.map((deal, i) => (
          <DealCard key={deal.id} deal={deal} variant="grid" aboveFold={i < 4} demo={demo} />
        ))}
      </div>
    </section>
  );
}