import { useState } from "react";
import Sidebar, { PANELS } from "./components/Sidebar";
import Header from "./components/Header";
import RenamePanel from "./components/RenamePanel";
import EpisodesPanel from "./components/EpisodesPanel";
import SubtitlesPanel from "./components/SubtitlesPanel";
import SfvPanel from "./components/SfvPanel";
import PanelStub from "./components/PanelStub";

export default function App() {
  const [selected, setSelected] = useState(PANELS[0].id);
  const current = PANELS.find((p) => p.id === selected) ?? PANELS[0];

  return (
    <div className="app-shell">
      <Sidebar selected={selected} onSelect={setSelected} />
      <div className="main-column">
        <Header title={current.name} />
        <div className="main-content">
          {selected === "rename" ? (
            <RenamePanel />
          ) : selected === "episodes" ? (
            <EpisodesPanel />
          ) : selected === "subtitles" ? (
            <SubtitlesPanel />
          ) : selected === "sfv" ? (
            <SfvPanel />
          ) : (
            <PanelStub name={current.name} />
          )}
        </div>
      </div>
    </div>
  );
}