"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";

interface ProductCardProps {
  product: WooProduct;
  index?: number;
}

export default function ProductCard({ product, index = 0 }: ProductCardProps) {
  const image = getProductImage(product);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
    >
      <Link href={`/products/${product.slug}`} className="group block">
        <div className="relative aspect-[4/5] bg-background-ice overflow-hidden mb-4">
          {image && (
            <Image
              src={image}
              alt={product.name}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
            />
          )}
          {product.stock_status === "outofstock" && (
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
              <span className="text-white font-medium">Out of Stock</span>
            </div>
          )}
        </div>
        
        <h3 className="font-serif text-lg mb-1 group-hover:text-accent-dark transition-colors">
          {product.name}
        </h3>
        
        <p className="text-foreground-muted">
          {product.price ? formatPrice(product.price) : "Contact for price"}
        </p>
      </Link>
    </motion.div>
  );
}