import { useState } from "react";
import { useGame } from "../store.js";
import "./simulator.css";

export default function SimulatorPanel({ side, title, children }) {
  const visible = useGame((s) => s.entered && s.bootDone && !s.menuOpen && !s.biosVisible);
  const [open, setOpen] = useState(() => window.innerWidth >= 900);
  if (!visible) return null;
  return <aside className={`sim-panel sim-panel-${side}`} aria-label={`${title} controls`}>
    <button className="sim-panel-title" aria-expanded={open} onClick={() => setOpen(!open)}>{title} <span>{open ? "−" : "+"}</span></button>
    {open && <div className="sim-panel-content">{children}</div>}
  </aside>;
}