'use client';

import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import { ScrollRow } from '@/components/ui/layout/ScrollRow';
import { DealCard, type DealCardDeal } from '@/components/ui/domain/DealCard';
import { useLocale } 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 title = config.title[locale];

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

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