'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';
import { Product } from '@/lib/services';

interface ProductCardProps {
  product: Product;
  index: number;
}

export function ProductCard({ product, index }: ProductCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
      className="group relative bg-white transition-all duration-300 rounded-[20px] overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1"
    >
      {/* Image Container */}
      <div className="h-[286px] overflow-hidden relative flex items-center justify-center rounded-t-[20px]">
        <Image
          src={
            product.primary_image_url || '/images/products/list-product.avif'
          }
          alt={product.name}
          fill
          loading="lazy"
          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
          className="object-cover group-hover:scale-110 transition-transform duration-500"
        />
      </div>

      {/* Content */}
      <div className="p-5 text-left flex flex-col items-start">
        <h3 className="text-lg font-bold capitalize text-[#6E5904] mb-3 line-clamp-1 group-hover:text-[#D4A000] transition-colors leading-snug tracking-[-0.53px]">
          {product.name}
        </h3>

        <div className="flex flex-wrap items-center gap-2">
          {product.variants && product.variants.length > 0 ? (
            product.variants.map((v) => (
              <span
                key={v.id}
                className="px-3 py-1 bg-[#F0EEE6] text-[#6E5904] text-sm font-medium rounded-[20px] lowercase tracking-[-0.53px]"
              >
                {Math.round(Number(v.weight))} {v.attributes?.unit || 'gr'}
              </span>
            ))
          ) : (
            <>
              <span className="px-3 py-1 bg-[#F0EEE6] text-[#6E5904] text-sm font-medium rounded-[20px] lowercase tracking-[-0.53px]">
                250 gr
              </span>
              <span className="px-3 py-1 bg-[#F0EEE6] text-[#6E5904] text-sm font-medium rounded-[20px] lowercase tracking-[-0.53px]">
                500 gr
              </span>
            </>
          )}
        </div>
      </div>
    </motion.div>
  );
}