/* global React */
const { useState } = React;

window.Eyebrow = function Eyebrow({ children, color }) {
  return (
    <span className="eyebrow" style={color ? { color } : null}>
      {children}
    </span>
  );
};

window.Hairline = function Hairline({ w = 56 }) {
  return <span className="hairline-gold" style={{ width: w }}></span>;
};

window.EyebrowRow = function EyebrowRow({ kicker, label, right }) {
  return (
    <div className="eyebrow-row">
      <Hairline w={28} />
      <Eyebrow>{kicker}</Eyebrow>
      {label ? <span className="kicker-label">{label}</span> : null}
      {right ? <span className="kicker-right">{right}</span> : null}
    </div>
  );
};

window.Button = function Button({ variant = "primary", children, onClick, as = "button", ...rest }) {
  const Tag = as;
  return (
    <Tag className={`btn btn-${variant}`} onClick={onClick} {...rest}>
      {children}
    </Tag>
  );
};

window.TextLink = function TextLink({ children, href = "#", onClick }) {
  return (
    <a className="text-link" href={href} onClick={onClick}>
      {children} <span className="arrow">→</span>
    </a>
  );
};

window.Tag = function Tag({ children, tone = "neutral" }) {
  return <span className={`tag tag-${tone}`}>{children}</span>;
};

window.Dialog = function Dialog({ open, onClose, title, children }) {
  if (!open) return null;
  return (
    <div className="dialog-scrim" onClick={onClose}>
      <div className="dialog" onClick={(e) => e.stopPropagation()}>
        <div className="dialog-head">
          <Hairline w={28} />
          <Eyebrow>Booking</Eyebrow>
          <button className="dialog-x" onClick={onClose} aria-label="Close">×</button>
        </div>
        <h2 className="dialog-title">{title}</h2>
        {children}
      </div>
    </div>
  );
};