"use client";

import Link from "next/link";
import { useState } from "react";
import type { Product } from "@/data/products";
import { formatCop } from "@/data/products";

export function ProductCard({ product }: { product: Product }) {
  const [hover, setHover] = useState(false);
  const image = hover && product.images[1] ? product.images[1] : product.images[0];

  return (
    <Link
      href={`/product/${product.slug}`}
      className="group block"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="aspect-[3/4] overflow-hidden bg-ot-cream-dark relative">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={image}
          alt={product.name}
          className={`h-full w-full transition-transform duration-500 group-hover:scale-[1.03] ${
            product.category === "accesorios"
              ? "object-contain object-center p-3 bg-ot-cream"
              : "object-cover object-top"
          }`}
        />
        {product.images.length > 1 && (
          <span className="absolute bottom-3 right-3 text-[10px] tracking-[0.14em] uppercase bg-ot-cream/90 px-2 py-1">
            {product.images.length} fotos
          </span>
        )}
      </div>
      <div className="mt-4 space-y-1">
        <p className="text-[11px] tracking-[0.18em] uppercase text-ot-muted">{product.collection}</p>
        <h3 className="font-serif text-xl leading-tight">{product.name}</h3>
        <p className="text-sm text-ot-ink/80">{formatCop(product.price)}</p>
      </div>
    </Link>
  );
}