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

type Props = {
  shippingCost?: number | null;
  freeShipping?: boolean;
  expressShipping?: boolean;
  display?: "compact" | "detail";
  className?: string;
};

const badgeBase =
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium leading-none";

export default function ProductShippingBadges({
  shippingCost,
  freeShipping,
  expressShipping,
  display = "compact",
  className,
}: Props) {
  const paid = shippingCost != null && Number(shippingCost) > 0;
  const fee = paid ? Number(shippingCost).toFixed(2) : null;

  if (!paid && !freeShipping && !expressShipping) return null;

  return (
    <div className={cn("flex flex-wrap gap-1.5", className)}>
      {freeShipping ? (
        <span
          className={cn(
            badgeBase,
            display === "detail"
              ? "border-transparent bg-transparent px-0 py-0 text-sm font-semibold text-slate-900"
              : "border-emerald-200/80 bg-emerald-50 text-emerald-900",
          )}
        >
          {display === "detail" ? (
            <>
              <span aria-hidden="true" className="mr-1.5">
                🚚
              </span>
              Enjoy Free Shipping
            </>
          ) : (
            "Free Shipping"
          )}
        </span>
      ) : paid ? (
        <span
          className={cn(
            badgeBase,
            "border-slate-200 bg-slate-50 text-slate-700",
          )}
        >
          Delivery +Rs {fee}/unit
        </span>
      ) : null}
      {expressShipping ? (
        <span
          className={cn(
            badgeBase,
            "border-primary/20 bg-primary/[0.06] text-primary",
          )}
        >
          Express
        </span>
      ) : null}
    </div>
  );
}