import Link from "next/link";
import { ArrowUpLeft } from "lucide-react";
import { Placeholder } from "@/components/Placeholder";
import { faDigits, formatPrice } from "@/lib/format";
import type { Product } from "@/lib/data";
import { productHref } from "@/lib/store";

export function ProductCard({ product }: { product: Product }) {
  const href = product.href ?? productHref(product.id, product.title);

  return (
    <article className="group flex h-full flex-col rounded-2xl border border-line bg-white p-3">
      <Link href={href} className="relative block aspect-square overflow-hidden rounded-xl bg-paper">
        {product.discount ? (
          <span className="absolute top-2 right-2 z-10 rounded-md bg-brand px-1.5 py-0.5 text-[11px] font-bold text-white">
            {faDigits(product.discount)}٪
          </span>
        ) : null}
        <Placeholder
          src={product.image}
          fallbackSrc="/placeholders/product.svg"
          alt={product.title}
          className="absolute inset-0 size-full object-cover transition group-hover:scale-[1.03]"
        />
      </Link>
      {product.brand ? (
        <p className="font-latin mt-3 text-[11px] tracking-wide text-brand">{product.brand}</p>
      ) : (
        <p className="mt-3 h-[16px]" />
      )}
      <h3 className="mt-1 line-clamp-2 min-h-[40px] text-[13px] leading-5 text-ink">
        <Link href={href}>{product.title}</Link>
      </h3>
      <div className="mt-auto pt-3">
        {product.oldPrice ? (
          <p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)} تومان</p>
        ) : (
          <p className="h-[16px]" />
        )}
        <div className="mt-1 flex items-end justify-between gap-2">
          <p className="text-[14px] font-bold text-ink">
            {product.price != null ? (
              <>
                {formatPrice(product.price)}
                <span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
              </>
            ) : (
              <span className="text-[12px] font-medium text-muted">تماس بگیرید</span>
            )}
          </p>
          <Link
            href={href}
            className="grid size-9 place-items-center rounded-xl bg-brand text-white transition hover:bg-brand-dark"
            aria-label="مشاهده محصول"
          >
            <ArrowUpLeft className="size-4" />
          </Link>
        </div>
      </div>
    </article>
  );
}