import ProductCard from './ProductCard';
import { useRef } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';
import { getSectionPaddingClasses } from '../utils/spacing';

interface DynamicProductCarouselProps {
  payload: any;
}

export default function DynamicProductCarousel({ payload }: DynamicProductCarouselProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const p = payload || {};
  const { products = [] } = p;
  const title = getLocalizedField(p.title, lang);
  const description = getLocalizedField(p.description, lang);

  const carouselRef = useRef<HTMLDivElement>(null);
  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' });

  return (
    <section className={`bg-pop-bg ${getSectionPaddingClasses(p)}`}>
      <div className="ui-section-inner">
        {(title || description) && (
          <div className="text-center mb-12">
            {title && <h2 className="text-3xl md:text-5xl font-serif text-pop-black mb-4">{title}</h2>}
            {description && <p className="text-lg text-pop-black/70 max-w-2xl mx-auto">{description}</p>}
          </div>
        )}
        
        {products.length === 0 ? (
          <div className="text-center py-12 text-pop-black/50 italic">
            No products to display.
          </div>
        ) : (
          <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
            <button
              onClick={scrollLeft}
              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
              aria-label="Scroll left"
            >
              <ChevronLeft className="h-6 w-6" />
            </button>
            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
              {products.map((p: any) => (
                <div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                  <ProductCard product={p} enableQuickShop={true} />
                </div>
              ))}
            </div>
            <button
              onClick={scrollRight}
              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
              aria-label="Scroll right"
            >
              <ChevronRight className="h-6 w-6" />
            </button>
          </div>
        )}
      </div>
    </section>
  );
}