'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, 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 payload = (data ?? { deals: [], categorySlug: null }) as {
    deals: DealCardDeal[];
    categorySlug: string | null;
  };
  const { deals, categorySlug } = payload;
  const { locale } = useLocale();
  const t = useT('feed');
  const title = config.title[locale];

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

  const seeAllHref = categorySlug ? `/category/${categorySlug}/` : undefined;

  return (
    <section>
      <SectionHeader
        title={title}
        subtitle={undefined}
        actionHref={seeAllHref}
        actionLabel={seeAllHref ? t('see_all') : 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>
  );
}