import { Placeholder } from "./Placeholder";
import { formatPrice } from "@/data/sample";

type ProductCardProps = {
  name: string;
  brand: string;
  price: number | null;
  oldPrice?: number | null;
  discount?: number;
  image: string;
  variant?: "sale" | "default" | "brand";
  href?: string;
  fluid?: boolean;
  contactPhone?: string;
};

export function ProductCard({
  name,
  brand,
  price,
  oldPrice,
  discount,
  image,
  variant = "default",
  href,
  fluid = false,
  contactPhone,
}: ProductCardProps) {
  const info = (
    <>
      <div className="relative p-[10px]">
        <Placeholder
          src={image}
          alt={name}
          width="100%"
          fit="contain"
          className="aspect-square w-full rounded-lg border-0"
        />
        {variant === "brand" && (
          <span className="font-display absolute top-3 left-3 text-[10px] font-bold tracking-widest text-red-dark uppercase">
            {brand}
          </span>
        )}
      </div>
      <div className="p-4 pb-0">
        <p className="font-display mb-1 text-[11px] tracking-wide text-muted uppercase">
          {brand}
        </p>
        <h3 className="mb-3 line-clamp-2 min-h-[2.75rem] text-sm leading-relaxed font-medium">
          {name}
        </h3>
        <div className="space-y-1">
          {oldPrice != null && (
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted line-through">{formatPrice(oldPrice)}</span>
              {discount != null && (
                <span className="rounded-md bg-green-50 px-1.5 py-0.5 text-[11px] font-bold text-green-700">
                  {discount}٪
                </span>
              )}
            </div>
          )}
          <div className="text-base font-bold text-red-dark">
            {price != null ? (
              <>
                {formatPrice(price)}
                <span className="mr-0.5 text-xs font-normal text-muted">تومان</span>
              </>
            ) : (
              <span className="text-sm font-normal text-muted">تماس با فروشگاه</span>
            )}
          </div>
        </div>
      </div>
    </>
  );

  return (
    <article
      className={`group flex h-full flex-col ${fluid ? "w-full" : "w-[220px] shrink-0 md:w-[240px]"} overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md`}
    >
      {href ? (
        <a href={href} className="block flex-1">
          {info}
        </a>
      ) : (
        <div className="flex-1">{info}</div>
      )}
      <div className="p-4">
        {price != null ? (
          <button
            type="button"
            className="w-full rounded-lg bg-red py-2 text-sm font-medium text-white transition-colors hover:bg-red-dark"
          >
            افزودن به سبد
          </button>
        ) : contactPhone ? (
          <a
            href={`tel:${contactPhone}`}
            className="flex w-full items-center justify-center gap-1.5 rounded-lg bg-red py-2 text-sm font-medium text-white transition-colors hover:bg-red-dark"
          >
            <span aria-hidden>📞</span>
            تماس با فروشگاه
          </a>
        ) : (
          <button
            type="button"
            disabled
            className="w-full cursor-not-allowed rounded-lg bg-red/60 py-2 text-sm font-medium text-white"
          >
            تماس با فروشگاه
          </button>
        )}
      </div>
    </article>
  );
}