/* global React */

// ============================================
// PRIMITIVES — Tag, Button, Card, Section, Kbd
// ============================================

function Tag({ children, variant = "default", icon }) {
  return (
    <span className={`tag tag--${variant}`}>
      {icon && <span className="tag__icon">{icon}</span>}
      {children}
    </span>
  );
}

function Button({ children, variant = "primary", size = "md", href, onClick, iconRight, iconLeft, className = "", ...rest }) {
  const cls = `btn btn--${variant} btn--${size} ${className}`.trim();
  const content = (
    <>
      {iconLeft && <span className="btn__icon">{iconLeft}</span>}
      <span>{children}</span>
      {iconRight && <span className="btn__icon">{iconRight}</span>}
    </>
  );
  if (href) return <a href={href} className={cls} onClick={onClick} {...rest}>{content}</a>;
  return <button className={cls} onClick={onClick} {...rest}>{content}</button>;
}

function Card({ children, className = "", href, ...rest }) {
  const cls = `card ${className}`.trim();
  if (href) return <a href={href} className={cls} {...rest}>{children}</a>;
  return <div className={cls} {...rest}>{children}</div>;
}

function Section({ id, eyebrow, title, children, className = "" }) {
  return (
    <section id={id} className={`section ${className}`.trim()}>
      <div className="container">
        {(eyebrow || title) && (
          <div className="section__header">
            {eyebrow && <div className="t-eyebrow section__eyebrow">{eyebrow}</div>}
            {title && <h2 className="t-h2 section__title">{title}</h2>}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

function Kbd({ children }) {
  return <kbd className="kbd">{children}</kbd>;
}

// Arrow icon, reused
function ArrowUpRight({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M7 17L17 7M17 7H9M17 7V15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, { Tag, Button, Card, Section, Kbd, ArrowUpRight });