import { Link } from 'react-router-dom';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination } from 'swiper/modules';
import ProductCard from './ProductCard';
import type { Product, ProductsSectionPayload } from '@homaroma/types';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

interface DynamicProductsProps {
  payload: ProductsSectionPayload & { products?: Product[] };
}

export default function DynamicProducts({ payload }: DynamicProductsProps) {
  const { title, subtitle, products = [], layout = 'grid', enableQuickShop = false } = payload;

  return (
    <section className="bg-pop-bg py-24 px-6 relative">
      <div className="max-w-7xl mx-auto space-y-12 relative z-10">
        <div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b border-gray-200 pb-6">
          <div>
            <h2 className="text-4xl md:text-5xl font-bold text-pop-black">
              {title || "Featured Picks"}
            </h2>
            {subtitle && (
              <p className="text-gray-500 mt-2">{subtitle}</p>
            )}
          </div>
          <Link
            to="/shop"
            className="text-pop-pink font-medium hover:text-pop-red transition-colors flex items-center gap-2"
          >
            View All Collection &rarr;
          </Link>
        </div>

        {products.length === 0 ? (
          <div className="text-center py-12 text-gray-500">
            No products found in this section
          </div>
        ) : layout === 'carousel' ? (
          <div className="relative select-none pb-12">
            <Swiper
              modules={[Autoplay, Pagination]}
              spaceBetween={24}
              slidesPerView={1}
              breakpoints={{
                640: { slidesPerView: 2 },
                1024: { slidesPerView: 3 }
              }}
              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-spa-forest' }}
              autoplay={{ delay: 6000, disableOnInteraction: false }}
              className="w-full"
            >
              {products.map((p) => (
                <SwiperSlide key={p.id} className="h-auto">
                  <ProductCard product={p} enableQuickShop={enableQuickShop} />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {products.map((p) => (
              <div key={p.id}>
                <ProductCard product={p} enableQuickShop={enableQuickShop} />
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}