import { cn } from "@/lib/utils";

interface PriceDisplayProps {
  /** Price in cents */
  price: number;
  /** Original retail price in cents (optional) */
  originalRetail?: number | null;
  /** Size variant */
  size?: "sm" | "md" | "lg";
}

function formatPrice(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
}

function calcSavingsPercent(price: number, original: number): number {
  return Math.round(((original - price) / original) * 100);
}

const sizeStyles = {
  sm: { price: "text-sm font-bold", original: "text-xs", badge: "text-[10px] px-1.5 py-0.5" },
  md: { price: "text-base font-bold", original: "text-sm", badge: "text-xs px-2 py-0.5" },
  lg: { price: "text-2xl font-bold", original: "text-sm", badge: "text-xs px-2.5 py-1" },
};

export function PriceDisplay({ price, originalRetail, size = "md" }: PriceDisplayProps) {
  const styles = sizeStyles[size];
  const showSavings = originalRetail != null && originalRetail > price;

  return (
    <div className="flex items-baseline gap-2 flex-wrap">
      <span className={cn(styles.price, "text-slate-900")}>{formatPrice(price)}</span>
      {showSavings && (
        <>
          <span className={cn(styles.original, "text-slate-400 line-through")}>
            {formatPrice(originalRetail)}
          </span>
          <span
            className={cn(
              styles.badge,
              "rounded-full bg-forest-100 text-forest-800 font-semibold"
            )}
          >
            Save {calcSavingsPercent(price, originalRetail)}%
          </span>
        </>
      )}
    </div>
  );
}