// Reusable panel chrome: header + crosshair corners + 1px edge.

const Panel = ({ title, status = "online", statusLabel = "LIVE", coords, meta, right, children, height, padded = true, style = {} }) => (
  <section style={{
    background: "var(--panel)", border: "1px solid var(--edge)",
    position: "relative", height, display: "flex", flexDirection: "column",
    ...style,
  }}>
    <Crosshair />
    <header style={{
      display: "flex", alignItems: "center", gap: 10,
      padding: "8px 12px", borderBottom: "1px solid var(--edge)",
      fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase",
      color: "var(--ash)", flexShrink: 0,
    }}>
      <span style={{ color: "var(--bone)", fontWeight: 600 }}>{title}</span>
      <span style={{ color: "var(--amber)" }}>//</span>
      <Pill status={status}>{statusLabel}</Pill>
      {coords && <><span style={{ color: "var(--ash-deep)" }}>·</span><Coord style={{ color: "var(--ash)" }}>{coords}</Coord></>}
      {meta && <><span style={{ color: "var(--ash-deep)" }}>·</span><span>{meta}</span></>}
      <span style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>{right}</span>
    </header>
    <div style={{ padding: padded ? 12 : 0, flex: 1, minHeight: 0, overflow: "hidden" }}>{children}</div>
  </section>
);

window.Panel = Panel;