// Primitives — Mateo Romero portfolio UI kit
// Keep these tiny and composable.

const Eyebrow = ({ children, style }) => (
  <span className="mr-eyebrow" style={style}>{children}</span>
);

const Tag = ({ children }) => (
  <span className="mr-tag">{children}</span>
);

const Dot = ({ size = 8 }) => (
  <span className="mr-dot" style={{ width: size, height: size }} />
);

// Solid dark pill button with growing-dot indicator (Orchid signature)
const PillButton = ({ children, onClick, variant = "ghost" }) => (
  <button
    className={`mr-pill mr-pill-${variant}`}
    onClick={onClick}
    type="button"
  >
    <span className="mr-pill-label">{children}</span>
    <span className="mr-pill-arrow" aria-hidden="true">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" strokeWidth="1.8"
           strokeLinecap="round" strokeLinejoin="round">
        <line x1="5" y1="12" x2="19" y2="12" />
        <polyline points="13 6 19 12 13 18" />
      </svg>
    </span>
    <span className="mr-pill-indicator" aria-hidden="true">
      <span className="mr-pill-dot" />
      <span className="mr-pill-bar" />
    </span>
  </button>
);

// Small icon button (40×40 round) — used for slideshow arrows
const RoundIconButton = ({ direction = "right", onClick, ariaLabel }) => (
  <button
    type="button"
    className="mr-icon-btn"
    onClick={onClick}
    aria-label={ariaLabel || direction}
  >
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.5"
         strokeLinecap="round" strokeLinejoin="round"
         style={{ transform: direction === "left" ? "scaleX(-1)" : "none" }}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="13 6 19 12 13 18" />
    </svg>
  </button>
);

// Up-right arrow pill that sits on cards
const UpRightBadge = () => (
  <span className="mr-up-right" aria-hidden="true">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.8"
         strokeLinecap="round" strokeLinejoin="round">
      <line x1="7" y1="17" x2="17" y2="7" />
      <polyline points="8 7 17 7 17 16" />
    </svg>
  </span>
);

Object.assign(window, { Eyebrow, Tag, Dot, PillButton, RoundIconButton, UpRightBadge });