Storefront components

import { formatMoney, type Money } from "@/registry/hextor/lib/store";
import { cn } from "@/registry/hextor/lib/utils";

/**
 * Renders a single price, a sale price with its struck-through compare-at, or
 * a "from" range for a product whose variants are not all the same price.
 *
 * `range` wins over `price` when both are given rather than erroring, so a
 * caller can pass `priceRange(product)` unconditionally and let this decide
 * whether the range collapses to a single number — every variant of a
 * single-priced product has `min.amount === max.amount`, and re-deriving that
 * check in every caller is the kind of duplication that drifts.
 */
export function Price({
  price,
  compareAtPrice,
  range,
  locale,
  size = "default",
  fromLabel = "From",
  className,
}: {
  price?: Money;
  compareAtPrice?: Money;
  range?: { min: Money; max: Money };
  locale?: string;
  size?: "sm" | "default" | "lg";
  /** Prefix shown before a collapsed range, e.g. "From ฿590". */
  fromLabel?: string;
  className?: string;
}) {
  const sizeClass = {
    sm: "text-sm",
    default: "text-base",
    lg: "text-2xl",
  }[size];

  if (range) {
    const isRange = range.min.amount !== range.max.amount;
    return (
      <span className={cn("inline-flex items-baseline gap-1 font-medium tabular-nums", sizeClass, className)}>
        {isRange && <span className="text-muted-foreground">{fromLabel}</span>}
        {formatMoney(range.min, locale)}
      </span>
    );
  }

  if (!price) return null;

  const onSale = compareAtPrice != null && compareAtPrice.amount > price.amount;

  return (
    <span className={cn("inline-flex items-baseline gap-1.5 font-medium tabular-nums", sizeClass, className)}>
      <span className={cn(onSale && "text-destructive")}>{formatMoney(price, locale)}</span>
      {onSale && compareAtPrice && (
        <span className="text-muted-foreground line-through">{formatMoney(compareAtPrice, locale)}</span>
      )}
    </span>
  );
}