apps-registry/workloads/ecommerce/components/product/product-card.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import { Heart, ShoppingBag, Sparkles, TriangleAlert } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Product } from "@/lib/headless/types";
import { formatMoney, LOW_STOCK_THRESHOLD } from "@/lib/utils";
import { useCartStore } from "@/store/cart-store";
import { useWishlistStore } from "@/store/wishlist-store";

export function ProductCard({ product, priority = false }: { product: Product; priority?: boolean }) {
  const addItem = useCartStore((state) => state.addItem);
  const wishlistProducts = useWishlistStore((state) => state.products);
  const wishlistHydrated = useWishlistStore((state) => state.hasHydrated);
  const toggleProduct = useWishlistStore((state) => state.toggleProduct);
  const isFavorite = wishlistHydrated && wishlistProducts.some((item) => item.id === product.id);
  const discountPercent =
    product.compareAtPrice && product.price
      ? Math.round((1 - product.price / product.compareAtPrice) * 100)
      : null;

  const [selectedVariantId, setSelectedVariantId] = useState(product.variants[0]?.id);
  const selectedVariant = product.variants.find((variant) => variant.id === selectedVariantId) ?? product.variants[0];
  const outOfStock = selectedVariant?.available === false;
  const lowStock =
    !outOfStock &&
    selectedVariant?.inventoryQuantity !== null &&
    selectedVariant?.inventoryQuantity !== undefined &&
    selectedVariant.inventoryQuantity > 0 &&
    selectedVariant.inventoryQuantity <= LOW_STOCK_THRESHOLD
      ? selectedVariant.inventoryQuantity
      : null;

  return (
    <article className="group flex h-full flex-col overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg shadow-ari-marino/5 transition duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-ari-coral/10">
      <div className="relative aspect-square overflow-hidden bg-white">
        <Link href={`/product/${product.slug}`} prefetch={false}><Image src={product.thumbnail} alt={product.name} fill priority={priority} sizes="(max-width: 640px) 82vw, (max-width: 1024px) 44vw, 280px" className="object-cover transition duration-500 group-hover:scale-[1.035]" /></Link>
        <div className="absolute left-3 top-3 flex gap-2">{outOfStock && <Badge className="bg-rose-600 text-white">Agotado</Badge>}{discountPercent && discountPercent > 0 && <Badge className="bg-ari-coral-claro text-ari-marino">-{discountPercent}%</Badge>}{product.isNew && <Badge className="bg-ari-marino text-white">Nuevo</Badge>}{product.featured && <Badge className="bg-ari-coral-claro text-ari-marino"><Sparkles className="mr-1 size-3" />Top</Badge>}</div>
        {outOfStock && <div className="pointer-events-none absolute inset-0 bg-white/40" />}
        <button type="button" aria-label={isFavorite ? "Quitar de favoritos" : "Agregar a favoritos"} aria-pressed={isFavorite} className={`absolute right-3 top-3 rounded-full p-2.5 shadow-lg backdrop-blur transition ${isFavorite ? "bg-ari-coral text-white" : "bg-white/95 text-slate-900 hover:text-ari-coral"}`} onClick={() => toggleProduct(product)}><Heart className={`size-4 ${isFavorite ? "fill-current" : ""}`} /></button>
      </div>
      <div className="flex flex-1 flex-col space-y-3 p-5">
        <div className="flex items-center justify-between gap-2 text-xs font-bold text-slate-500"><span>{product.category}</span><span className="rounded-md bg-ari-coral-claro/10 px-2 py-1 text-ari-marino">{product.collection}</span></div>
        <Link href={`/product/${product.slug}`} prefetch={false}><h3 className="line-clamp-2 min-h-12 text-lg font-black leading-6 text-ari-marino group-hover:text-ari-coral">{product.name}</h3></Link>
        <p className="line-clamp-2 min-h-10 text-sm leading-5 text-slate-500">{product.shortDescription}</p>
        {product.variants.length > 1 && (
          <div className="flex flex-wrap gap-1.5">
            {product.variants.map((variant) => (
              <button
                key={variant.id}
                type="button"
                disabled={!variant.available}
                aria-pressed={selectedVariantId === variant.id}
                aria-label={`${variant.name}: ${variant.value}`}
                onClick={() => setSelectedVariantId(variant.id)}
                className={`rounded-md border px-2.5 py-1 text-xs font-bold transition ${
                  selectedVariantId === variant.id
                    ? "border-ari-coral bg-ari-coral/10 text-ari-coral"
                    : "border-slate-200 text-slate-600 hover:border-slate-400"
                } ${!variant.available ? "cursor-not-allowed opacity-40" : ""}`}
              >
                {variant.value}
              </button>
            ))}
          </div>
        )}
        {lowStock !== null && (
          <span className="flex items-center gap-1.5 text-xs font-bold text-amber-600"><TriangleAlert className="size-3.5" />Quedan {lowStock}</span>
        )}
        {outOfStock && (
          <span className="flex items-center gap-1.5 text-xs font-bold text-rose-600"><TriangleAlert className="size-3.5" />Sin stock</span>
        )}
        <div className="mt-auto flex items-center justify-between gap-3 pt-1">
          <div className="flex flex-col">
            {product.compareAtPrice && <span className="text-xs font-bold text-slate-400 line-through">{formatMoney(product.compareAtPrice, product.currency)}</span>}
            <strong className="font-display text-base font-bold text-ari-marino">{formatMoney(product.price, product.currency)}</strong>
          </div>
          <Button variant="primary" size="sm" disabled={outOfStock} onClick={() => addItem(product, selectedVariantId)}><ShoppingBag className="size-4" />{outOfStock ? "Agotado" : "Agregar"}</Button>
        </div>
      </div>
    </article>
  );
}