'use client';

import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import { AutoScrollRow } from '@/components/ui/layout/AutoScrollRow';
import { DealCard, type DealCardDeal } from '@/components/ui/domain/DealCard';
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 tCommon = useT('common');
  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}
      />
      <AutoScrollRow
        gap="3"
        px="6"
        py="2"
        duration={config.speedSeconds}
        showPauseButton
        pauseLabel={tCommon('close')}
        playLabel={tCommon('next')}
        aria-label={title}
      >
        {deals.map((deal, index) => (
          <div key={deal.id} className="snap-start">
            <DealCard
              deal={deal}
              demo={demo}
              variant="scroll"
              aboveFold={index === 0}
              className="w-36 lg:w-48"
            />
          </div>
        ))}
      </AutoScrollRow>
    </section>
  );
}