import type { Product } from "@/data/content";
import { formatPrice } from "@/lib/format";
import { Placeholder } from "./Placeholder";

type Props = {
  product: Product;
};

export function ProductCard({ product }: Props) {
  return (
    <article
      data-card
      className="glass-box w-[220px] shrink-0 snap-start rounded-3xl p-2.5 shadow-soft transition hover:-translate-y-1 hover:shadow-card sm:w-[240px]"
    >
      <Placeholder
        src={product.image}
        alt={product.title}
        width={280}
        height={340}
        rounded="rounded-2xl"
      />
      <div className="px-1.5 pt-3 pb-1">
        <div className="flex items-center justify-between gap-2">
          <p className="font-display text-[11px] text-cyan-600">{product.brand}</p>
          {product.badge ? (
            <span
              className={`rounded-full px-2 py-0.5 text-[10px] font-bold text-white ${
                product.badge === "یگانه"
                  ? "bg-purple-700"
                  : product.badge === "پرفروش"
                    ? "bg-cyan-600"
                    : "bg-rose-500"
              }`}
            >
              {product.badge}
            </span>
          ) : null}
        </div>
        <h3 className="mt-0.5 line-clamp-2 min-h-11 text-sm font-bold leading-6 text-ink">
          {product.title}
        </h3>
        <div className="mt-2 flex items-center gap-1.5">
          {product.colors.map((color) => (
            <span
              key={color}
              className="size-3.5 rounded-full border border-white shadow-[0_0_0_1px_#e8dcef]"
              style={{ backgroundColor: color }}
            />
          ))}
        </div>
        <div className="mt-3 flex items-end justify-between gap-2">
          <div>
            {product.oldPrice ? (
              <p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)}</p>
            ) : null}
            <p className="text-sm font-black text-purple-700">{formatPrice(product.price)}</p>
          </div>
          <button
            type="button"
            className="rounded-full bg-purple-700 px-3 py-1.5 text-xs font-bold text-white hover:bg-purple-800"
          >
            افزودن
          </button>
        </div>
      </div>
    </article>
  );
}