// Pipeko website — Sellos de promesa reutilizables. Exports window.PKBadgeMSI.
// Se monta sobre el Badge del design system, así que hereda tokens, tipografía
// y forma de pill. El ícono va como SVG inline a propósito: no todas las
// pantallas llaman a lucide.createIcons(), y un <i data-lucide> quedaría vacío.
const PKMSI_DS = window.PipekoInterioresDesignSystem_5fe34e;

const PK_MSI_LABEL = '3 Meses Sin Intereses';

function PKMSIIcon({ size = 14 }) {
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true" style={{ flexShrink: 0, display: 'block' }}
    >
      <rect x="2" y="5" width="20" height="14" rx="2"></rect>
      <line x1="2" y1="10" x2="22" y2="10"></line>
    </svg>
  );
}

function PKBadgeMSI({
  label = PK_MSI_LABEL,
  tone = 'plum',
  variant = 'solid',
  size = 'md',
  showIcon = true,
  ...rest
}) {
  const DSBadge = PKMSI_DS && PKMSI_DS.Badge;
  if (!DSBadge) return null;
  return (
    <DSBadge tone={tone} variant={variant} size={size} {...rest}>
      {showIcon && <PKMSIIcon size={size === 'sm' ? 12 : 14} />}
      {label}
    </DSBadge>
  );
}

Object.assign(window, { PKBadgeMSI: PKBadgeMSI, PK_MSI_LABEL: PK_MSI_LABEL });