'use client';

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

/**
 * merchant-grid Component
 * Renders a responsive grid of MerchantCard tiles.
 * Empty state shown for guests on favorites source.
 */
export function Component({ config, data }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const t = useT('merchant_grid');
  const merchants = (data ?? []) as MerchantCardMerchant[];
  const title = config.title ? config.title[locale] : undefined;

  if (merchants.length === 0) {
    const emptyKey = config.source === 'favorites' ? 'empty_favorites' : 'empty_stores';
    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-4 py-2 sm:grid-cols-3 md:grid-cols-4">
        {merchants.map((m) => (
          <MerchantCard key={m.id} merchant={m} variant="grid" />
        ))}
      </div>
    </section>
  );
}