// src/components/ui/ProductCard.tsx
import Image from "next/image";
import Link from "next/link";
import { Plus } from "lucide-react";

interface ProductCardProps {
  id: string;
  title: string;
  category: string;
  price: number;
  imageUrl: string;
  index?: number; // Para escalonar animaciones si queremos
}

export default function ProductCard({ id, title, category, price, imageUrl, index = 1 }: ProductCardProps) {
  return (
    <Link href={`/product/${id}`} className="group block cursor-pointer">
      {/* Contenedor de Imagen (Gris pálido, bordes muy redondos) */}
      <div className="bg-light rounded-[2rem] aspect-[3/4] flex items-center justify-center mb-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#f0f0f0]">
        
        {/* Número de índice estilo editorial */}
        <span className="absolute top-6 left-6 text-xs font-medium text-gray-300 tracking-widest z-20">
          {index.toString().padStart(2, '0')}
        </span>

        {/* Botón flotante "Quick Add" (aparece en hover) */}
        <button className="absolute bottom-6 right-6 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm translate-y-20 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 z-20 hover:bg-accent hover:text-white">
          <Plus className="w-5 h-5" />
        </button>

        {/* Imagen del Producto */}
        <div className="relative w-3/4 h-3/4 transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-110">
          <img
            src={imageUrl}
            alt={title}
            className="w-full h-full object-contain drop-shadow-md group-hover:drop-shadow-xl transition-all duration-500"
          />
        </div>
      </div>

      {/* Información del Producto */}
      <div className="flex justify-between items-start px-2">
        <div>
          <h3 className="text-lg font-medium text-dark leading-tight group-hover:text-accent transition-colors">
            {title}
          </h3>
          <p className="text-xs text-gray-400 uppercase tracking-wider mt-1 font-medium">
            {category}
          </p>
        </div>
        <div className="text-right">
          <span className="text-dark font-medium block">
            {new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(price)}
          </span>
        </div>
      </div>
    </Link>
  );
}