// Suit icons + utility iconography
const Suit = {
  Picas: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2 C12 2, 4 9, 4 14 C4 17, 6 19, 8.5 19 C10 19, 11 18.5, 11.5 17.5 L10 22 L14 22 L12.5 17.5 C13 18.5, 14 19, 15.5 19 C18 19, 20 17, 20 14 C20 9, 12 2, 12 2 Z" fill={color}/>
    </svg>
  ),
  Corazones: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 21 C12 21, 3 14, 3 8.5 C3 5.5, 5.5 3, 8.5 3 C10.5 3, 11.5 4, 12 5 C12.5 4, 13.5 3, 15.5 3 C18.5 3, 21 5.5, 21 8.5 C21 14, 12 21, 12 21 Z" fill={color}/>
    </svg>
  ),
  Diamantes: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2 L21 12 L12 22 L3 12 Z" fill={color}/>
    </svg>
  ),
  Treboles: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2 C9.79 2, 8 3.79, 8 6 C8 6.74, 8.2 7.43, 8.55 8.02 C7.7 7.39, 6.65 7, 5.5 7 C3.01 7, 1 9.01, 1 11.5 C1 13.99, 3.01 16, 5.5 16 C7.04 16, 8.4 15.23, 9.21 14.05 L8 22 L16 22 L14.79 14.05 C15.6 15.23, 16.96 16, 18.5 16 C20.99 16, 23 13.99, 23 11.5 C23 9.01, 20.99 7, 18.5 7 C17.35 7, 16.3 7.39, 15.45 8.02 C15.8 7.43, 16 6.74, 16 6 C16 3.79, 14.21 2, 12 2 Z" fill={color}/>
    </svg>
  ),
};

const Arrow = ({ size = 16, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 13 L13 3 M13 3 H6 M13 3 V10" stroke={color} strokeWidth="1.5" strokeLinecap="square"/>
  </svg>
);

const Plus = ({ size = 16, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 2 V14 M2 8 H14" stroke={color} strokeWidth="1.5" strokeLinecap="square"/>
  </svg>
);

Object.assign(window, { Suit, Arrow, Plus });