"use client";

import Image from "next/image";
import Link from "next/link";
import { Product } from "@/lib/types";
import { PriceTag } from "./PriceTag";
import { useCart } from "@/lib/cart-context";
import { useToast } from "@/lib/toast-context";

export function ProductCard({ product }: { product: Product }) {
  const { addItem } = useCart();
  const { show } = useToast();
  const outOfStock = product.stock <= 0;

  return (
    <div className="group relative flex flex-col">
      <Link
        href={`/product/${product.slug}`}
        className="relative block aspect-square overflow-hidden rounded-xl bg-brand-cream"
      >
        <Image
          src={product.images[0] ?? "/images/products/placeholder.webp"}
          alt={product.name}
          fill
          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
          className="object-cover transition-transform duration-200 group-hover:scale-[1.03]"
        />
        {product.compareAtPrice && product.compareAtPrice > product.price && (
          <span className="absolute left-2 top-2 rounded bg-brand-orange px-1.5 py-0.5 text-[11px] font-semibold text-white">
            Sale
          </span>
        )}
        {outOfStock && (
          <span className="absolute right-2 top-2 rounded bg-black/70 px-1.5 py-0.5 text-[11px] font-medium text-white">
            Sold out
          </span>
        )}
      </Link>

      <Link href={`/product/${product.slug}`} className="mt-3">
        <p className="text-[11px] font-medium uppercase tracking-wide text-black/40">
          {product.brand}
        </p>
        <h3 className="mt-0.5 line-clamp-2 text-sm font-medium leading-snug text-brand-ink">
          {product.name}
        </h3>
      </Link>

      <div className="mt-1.5">
        <PriceTag price={product.price} compareAtPrice={product.compareAtPrice} />
      </div>

      <button
        type="button"
        disabled={outOfStock}
        onClick={() => {
          addItem(product.id, 1);
          show(`Added ${product.name} to cart`);
        }}
        className="mt-2.5 w-full rounded-lg border border-brand-ink/10 bg-brand-ink py-2 text-sm font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:border-black/10 disabled:bg-black/10 disabled:text-black/40"
      >
        {outOfStock ? "Sold out" : "Add to cart"}
      </button>
    </div>
  );
}