'use client';
// @design-system: domain/RelatedDealsSection

import { ScrollRow } from '@/components/ui/layout/ScrollRow';
import { DealCard, type DealCardDeal } from '@/components/ui/domain/DealCard';
import { SectionHeader } from '@/components/ui/layout/SectionHeader';
import { useT } from '@/lib/i18n/react';

export interface RelatedDealsSectionProps {
  alsoBought: DealCardDeal[];
  similar: DealCardDeal[];
  moreFromVendor: DealCardDeal[];
  vendorName?: string;
  locale?: 'he' | 'en';
}

export function RelatedDealsSection({
  alsoBought,
  similar,
  moreFromVendor,
  vendorName = '',
}: RelatedDealsSectionProps) {
  const t = useT('deal_detail');

  const rows = [
    { deals: alsoBought, title: t('related_also_bought') },
    { deals: similar, title: t('related_similar') },
    {
      deals: moreFromVendor,
      title: t('related_more_from_vendor').replace('{vendorName}', vendorName),
    },
  ].filter((r) => r.deals.length > 0);

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

  return (
    <div className="flex flex-col gap-6">
      {rows.map((row) => (
        <section key={row.title} aria-label={row.title}>
          <SectionHeader title={row.title} />
          <ScrollRow gap="3" px="6" py="2">
            {row.deals.map((deal) => (
              <DealCard
                key={deal.id}
                deal={deal}
                variant="scroll"
                className="w-36 lg:w-48"
                aboveFold={false}
              />
            ))}
          </ScrollRow>
        </section>
      ))}
    </div>
  );
}