/**
 * BadgeList – renders product badges (sale, new, sold out, custom)
 */
import React from "react";
import { clsx } from "clsx";
const typeColors = {
    sale: {
        bg: "var(--seekora-badge-sale-bg, #ef4444)",
        text: "var(--seekora-badge-sale-text, #fff)",
    },
    new: {
        bg: "var(--seekora-badge-new-bg, #3b82f6)",
        text: "var(--seekora-badge-new-text, #fff)",
    },
    soldOut: {
        bg: "var(--seekora-badge-soldout-bg, #6b7280)",
        text: "var(--seekora-badge-soldout-text, #fff)",
    },
    limited: {
        bg: "var(--seekora-badge-limited-bg, #f59e0b)",
        text: "var(--seekora-badge-limited-text, #fff)",
    },
    custom: {
        bg: "var(--seekora-badge-custom-bg, #111827)",
        text: "var(--seekora-badge-custom-text, #fff)",
    },
};
export function BadgeList({ badges, maxBadges, position = "top-left", className, style, }) {
    if (!badges || badges.length === 0)
        return null;
    const visible = maxBadges ? badges.slice(0, maxBadges) : badges;
    return (React.createElement("div", { className: clsx("seekora-badge-list", position && `seekora-badge-list--${position}`, className), style: style }, visible.map((badge, i) => {
        const colors = typeColors[badge.type ?? "custom"];
        return (React.createElement("span", { key: `${badge.text}-${i}`, className: clsx("seekora-badge", badge.type &&
                `seekora-badge--${badge.type === "soldOut" ? "sold-out" : badge.type}`), style: {
                backgroundColor: badge.color ?? colors.bg,
                color: badge.textColor ?? colors.text,
            } }, badge.text));
    })));
}
