import { formatPrice, discountPercent } from "@/lib/format";

export function PriceTag({
  price,
  compareAtPrice,
  size = "md",
}: {
  price: number;
  compareAtPrice?: number;
  size?: "sm" | "md" | "lg";
}) {
  const pct = discountPercent(price, compareAtPrice);
  const priceClass =
    size === "lg" ? "text-2xl" : size === "sm" ? "text-sm" : "text-base";

  return (
    <div className="flex flex-wrap items-baseline gap-2">
      <span className={`font-display font-bold text-brand-ink ${priceClass}`}>
        {formatPrice(price)}
      </span>
      {pct > 0 && (
        <>
          <span className="text-xs text-black/40 line-through">
            {formatPrice(compareAtPrice as number)}
          </span>
          <span className="rounded bg-brand-orange-light px-1.5 py-0.5 text-[11px] font-semibold text-brand-orange-dark">
            -{pct}%
          </span>
        </>
      )}
    </div>
  );
}