// Reusable bits — Panel, ASCII weather, formatters, helpers
const { useState, useEffect, useMemo, useRef } = React;

const Panel = ({ tag, title, right, bracketed = true, children, className = "" }) => (
  <section className={`panel ${bracketed ? "bracketed" : ""} ${className}`}>
    <header className="panel-header">
      {tag && <span className="tag">{tag}</span>}
      <span className="title">{title}</span>
      {right && <span className="right">{right}</span>}
    </header>
    <div className="panel-body">{children}</div>
  </section>
);

const fmtNum = (n, dp = 0) => {
  if (typeof n !== "number") return n;
  return n.toLocaleString(undefined, { minimumFractionDigits: dp, maximumFractionDigits: dp });
};

const pad2 = (n) => String(n).padStart(2, "0");

// ASCII weather glyphs — small, monospaced; chosen to feel hand-drawn
const ASCII = {
  sun: ` \\ | /
- (*) -
 / | \\`,
  cloud: `  .--.
 (    )_
(______)`,
  rain: ` .--.
(    )
'.--.
 ' ' '`,
  fog: `=====
 ====
====`,
  storm: ` .--.
(    )
 '/_\\
  / `,
};

// status icons used in forecast
const FORECAST_ICON = { rain: "≋", fog: "≡", sun: "☼", cloud: "☁", storm: "⚡" };

Object.assign(window, { Panel, fmtNum, pad2, ASCII, FORECAST_ICON });