'use client';

import { useLocale } from '@/lib/i18n/react';
import { MerchantAvatar } from '@/components/ui/domain/MerchantAvatar';
import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import { ScrollRow } from '@/components/ui/layout/ScrollRow';
import type { MerchantAvatarMerchant } from '@/components/ui/domain/MerchantAvatar/MerchantAvatar';
import type { Config } from './config';

/**
 * merchant-scroll Component
 * Horizontal scroll row of MerchantAvatar tiles.
 */
export function Component({ config, data }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const merchants = (data ?? []) as MerchantAvatarMerchant[];
  const title = config.title ? config.title[locale] : undefined;

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

  return (
    <section aria-label={title}>
      {title && <SectionHeader title={title} />}
      <ScrollRow gap="3" px="4" py="2" aria-label={title}>
        {merchants.map((m) => (
          <MerchantAvatar key={m.id} merchant={m} size="md" href={`/business/${m.id}`} />
        ))}
      </ScrollRow>
    </section>
  );
}