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

export function Price({
  price,
  mrp,
  size = "md",
}: {
  price: number;
  mrp?: number | null;
  size?: "sm" | "md" | "lg";
}) {
  const pct = savingsPercent(price, mrp);
  const priceClass =
    size === "lg"
      ? "text-3xl font-bold"
      : size === "sm"
        ? "text-base font-semibold"
        : "text-xl font-bold";

  return (
    <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
      <span className={`text-slate-900 ${priceClass}`}>{formatPrice(price)}</span>
      {mrp && mrp > price ? (
        <span className="text-sm text-slate-400 line-through">
          {formatPrice(mrp)}
        </span>
      ) : null}
      {pct > 0 ? (
        <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-xs font-semibold text-emerald-700">
          {pct}% off
        </span>
      ) : null}
    </div>
  );
}