/* =========================================================================
   components.jsx — quiet shared UI: Masthead, Footer, Photo, Dateline.
   ========================================================================= */
const { useState, useEffect } = React;

function fmtStamp(iso) {
  const M = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
  const d = new Date(iso + "T00:00:00");
  return `${String(d.getDate()).padStart(2,"0")} ${M[d.getMonth()]} ${d.getFullYear()}`;
}

/* small caps dateline, optionally with the red "today" dot */
function Dateline({ children, dot }) {
  return (
    <div className="dl">
      {dot ? <span className="dot"></span> : null}
      {children}
    </div>
  );
}

/* display-only photograph. real <img> when item.src is set, else a quiet
   toned field. NEVER an upload control. */
function Photo({ item, no, ratio, click, onClick }) {
  const cls = "photo " + (item.src ? "" : "photo--ph ") + (click ? "photo--click " : "");
  if (item.src) {
    return (
      <div className={cls} style={ratio ? { aspectRatio: ratio } : null} onClick={onClick}>
        <img src={item.src} alt={t(item.caption || item.one, "en")} loading="lazy" />
      </div>
    );
  }
  return (
    <div className={cls} style={{ aspectRatio: ratio || "4 / 5", "--h": item.tone != null ? item.tone : 70 }} onClick={onClick}>
    </div>
  );
}

function Masthead({ view, setView, lang, setLang }) {
  return (
    <header className="masthead">
      <div className="brand" onClick={() => setView("home")}>
        Xuyang Liu<span className="dot">.</span>
      </div>
      <nav className="mast-nav">
        <button className={view === "daily" ? "active" : ""} onClick={() => setView("daily")}>{t(STR.nav_daily, lang)}</button>
        <button className={view === "work" ? "active" : ""} onClick={() => setView("work")}>{t(STR.nav_work, lang)}</button>
        <span className="sep">·</span>
        <span className="lang">
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <span className="bar">/</span>
          <button className={lang === "zh" ? "on" : ""} onClick={() => setLang("zh")}>中</button>
        </span>
      </nav>
    </header>
  );
}

function Footer({ lang }) {
  return (
    <footer className="foot">
      <span>© 2026 · {SITE.name}</span>
      <span>{SITE.domain}</span>
      <a className="tlink" href={"https://x.com/" + SITE.x} target="_blank" rel="noreferrer">@{SITE.x}</a>
    </footer>
  );
}

Object.assign(window, { fmtStamp, Dateline, Photo, Masthead, Footer });