/* eslint-disable */
// Shared atoms used across the rphlimacosta website UI kit.

const Eyebrow = ({ children, tone = "default" }) => (
  <div
    className="eyebrow"
    style={tone === "inverse" ? { color: "var(--cream-100)" } : undefined}
  >
    {children}
  </div>
);

const Tag = ({ children, tone = "petrol" }) => (
  <span className={`tag tag-${tone}`}>{children}</span>
);

const Btn = ({ children, variant = "primary", as = "button", href, onClick }) => {
  const cls = `btn btn-${variant}`;
  if (as === "a") {
    return (
      <a className={cls} href={href} onClick={onClick}>
        {children}
      </a>
    );
  }
  return (
    <button className={cls} onClick={onClick}>
      {children}
    </button>
  );
};

// A small dithered square used as a decorative mark.
const DitherMark = ({ size = 64, tone = "petrol", style }) => {
  const cls = tone === "amber" ? "dither dither-amber" : tone === "cream" ? "dither dither-cream" : "dither";
  return (
    <span
      className={cls}
      aria-hidden="true"
      style={{ display: "inline-block", width: size, height: size, ...style }}
    />
  );
};

// Carbon icon — loads from assets/icons/<name>.svg.
const CarbonIcon = ({ name, size = 24, color = "currentColor" }) => (
  <span
    style={{
      display: "inline-flex",
      width: size,
      height: size,
      WebkitMaskImage: `url(./assets/icons/${name}.svg)`,
      maskImage: `url(./assets/icons/${name}.svg)`,
      WebkitMaskRepeat: "no-repeat",
      maskRepeat: "no-repeat",
      WebkitMaskPosition: "center",
      maskPosition: "center",
      WebkitMaskSize: "contain",
      maskSize: "contain",
      backgroundColor: color,
    }}
    aria-hidden="true"
  />
);

Object.assign(window, { Eyebrow, Tag, Btn, DitherMark, CarbonIcon });