homaroma/apps/spa/src/components/DynamicProductCarousel.tsx

import ProductCard from './ProductCard';
import { useRef } from 'react';
import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
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 cardStyle = p.cardStyle || 'standard';
  const isMinimal = cardStyle === 'minimal' || cardStyle === 'swatch' || cardStyle === 'minimal_swatch';
  const viewAllLink = p.viewAllLink || '/products';
  const viewAllText = getLocalizedField(p.viewAllText, lang) || 'View All';
  const badgeText = getLocalizedField(p.badgeText, lang);
  const layout = p.layout || 'carousel';
  const containerWidth = p.containerWidth || 'standard';
  const cardSize = p.cardSize || 'medium';

  const getContainerWidthClass = (width: string) => {
    switch (width) {
      case 'full':
        return 'w-full max-w-none';
      case 'wide':
        return 'w-full max-w-[1600px] mx-auto';
      case 'standard':
      default:
        return 'ui-section-inner';
    }
  };

  const getCarouselCardWidth = () => {
    switch (cardSize) {
      case 'compact':
        return 'w-[46vw] sm:w-[calc((100%-32px)/3)] md:w-[calc((100%-60px)/4)] lg:w-[calc((100%-100px)/6)] flex-none snap-start';
      case 'large':
        return 'w-[78vw] sm:w-[calc((100%-16px)/2)] md:w-[calc((100%-20px)/2)] lg:w-[calc((100%-40px)/3)] flex-none snap-start';
      case 'medium':
      default:
        return 'w-[68vw] sm:w-[calc((100%-16px)/2)] md:w-[calc((100%-40px)/3)] lg:w-[calc((100%-60px)/4)] flex-none snap-start';
    }
  };

  const getGridColsClass = () => {
    switch (cardSize) {
      case 'compact':
        return 'grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6';
      case 'large':
        return 'grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3';
      case 'medium':
      default:
        return 'grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
    }
  };

  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 px-4 sm:px-6 md:px-8 overflow-hidden ${getSectionPaddingClasses(p)}`}>
      <div className={`${getContainerWidthClass(containerWidth)} space-y-6`}>
        {isMinimal ? (
          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between border-b border-black/10 pb-5">
            <div className="flex flex-col md:flex-row md:items-baseline md:gap-4">
              {title && <h2 className="text-2xl md:text-4xl font-serif text-pop-black tracking-tight">{title}</h2>}
              {description && <p className="text-xs md:text-sm text-pop-black/60 font-normal mt-1 md:mt-0">{description}</p>}
            </div>
            <Link to={viewAllLink} className="inline-flex items-center gap-1.5 text-xs font-semibold text-pop-black hover:text-brand-primary transition-colors hover:underline self-start md:self-auto">
              <span>{viewAllText}</span>
              <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
        ) : (
          (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>
        ) : layout === 'grid' ? (
          <div className={getGridColsClass()}>
            {products.map((prod: any) => (
              <ProductCard 
                key={prod.id}
                product={prod} 
                cardStyle={cardStyle} 
                badgeText={badgeText} 
                enableQuickShop={cardStyle === 'standard'} 
              />
            ))}
          </div>
        ) : (
          <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
            <button
              onClick={scrollLeft}
              className="hidden md:flex bg-white rounded-full shadow-md hover:text-brand-primary h-9 w-9 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-4 border border-black/10"
              aria-label="Scroll left"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>
            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 md:gap-5 pb-6">
              {products.map((prod: any) => (
                <div
                  key={prod.id}
                  className={getCarouselCardWidth()}
                >
                  <ProductCard 
                    product={prod} 
                    cardStyle={cardStyle} 
                    badgeText={badgeText} 
                    enableQuickShop={cardStyle === 'standard'} 
                  />
                </div>
              ))}
            </div>
            <button
              onClick={scrollRight}
              className="hidden md:flex bg-white rounded-full shadow-md hover:text-brand-primary h-9 w-9 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-4 border border-black/10"
              aria-label="Scroll right"
            >
              <ChevronRight className="h-5 w-5" />
            </button>
          </div>
        )}
      </div>
    </section>
  );
}