"use client";

import { motion } from "framer-motion";
import type { Product } from "@/types/saleor";
import ProductCard from "@/components/product/ProductCard";

interface ProductShowcaseProps {
  products: Product[];
  locale?: string;
}

export default function ProductShowcase({ products, locale = "SR" }: ProductShowcaseProps) {
  if (!products || products.length === 0) return null;

  return (
    <section className="py-20 px-4">
      <div className="container">
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <span className="text-caption text-[#666666] mb-4 block">Our Collection</span>
          <h2 className="text-3xl md:text-4xl font-medium mb-4">Our Products</h2>
          <p className="text-[#666666] max-w-2xl mx-auto">
            Discover our premium collection of natural oils for hair and skin care
          </p>
        </motion.div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
          {products.map((product, index) => (
            <ProductCard key={product.id} product={product} index={index} locale={locale} />
          ))}
        </div>
      </div>
    </section>
  );
}