'use client';

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

export function Component({
  config,
  data,
  demo,
}: {
  config: Config;
  data: unknown;
  demo?: boolean;
}) {
  const deals = (data ?? []) as DealCardDeal[];
  const { locale } = useLocale();
  const t = useT('deal-card');
  const title = config.title[locale];

  const isPreview = useShouldRenderEmptyRow();
  if (deals.length === 0) return isPreview ? <EmptyRowHeading title={title} /> : null;

  return (
    <section>
      <SectionHeader title={title} actionHref="/deals/group" actionLabel={t('see_all')} />
      <ScrollRow gap="3" px="6" py="2" aria-label={title}>
        {deals.map((deal) => (
          <DealCard
            key={deal.id}
            deal={deal}
            variant="scroll"
            className="w-36 lg:w-48"
            demo={demo}
          />
        ))}
      </ScrollRow>
    </section>
  );
}