'use client';

import { useLocale } from '@/lib/i18n/react';
import { VendorCard, type VendorCardData } from '@/components/ui/domain/VendorCard';
import { ScrollRow } from '@/components/ui/layout/ScrollRow';
import type { Config } from './config';

export function Component({ config, data }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const vendors = (data ?? []) as VendorCardData[];
  const title = config.title[locale];

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

  return (
    <section className="bg-surface-default mx-6 mt-4 flex flex-col gap-3 rounded-xl p-4 shadow-md">
      <h2 className="text-text-primary text-base font-[var(--font-weight-extrabold)]">{title}</h2>
      <ScrollRow gap="3" px="0" py="0" aria-label={title}>
        {vendors.map((vendor) => (
          <div key={vendor.id} className="w-64 shrink-0 lg:w-80">
            <VendorCard vendor={vendor} locale={locale} />
          </div>
        ))}
      </ScrollRow>
    </section>
  );
}