import { useState } from "react";
import Sidebar from "./components/Sidebar";
import Leads from "./pages/Leads";
import OtrosGeneral from "./pages/OtrosGeneral";
import Vendedores from "./pages/Vendedores";
import Roas from "./pages/Roas";
import CampanitaAlertas from "./components/CampanitaAlertas";
import ConfigModal from "./components/ConfigModal";
import ErrorBoundary from "./components/ErrorBoundary";

export default function App() {
  const [pagina, setPagina] = useState("leads");
  const [config, setConfig] = useState(false);

  function render() {
    switch (pagina) {
      case "leads": return <Leads />;
      case "otros": return <OtrosGeneral />;
      case "vendedores": return <Vendedores />;
      case "roas": return <Roas />;
      default: return null;
    }
  }

  return (
    <div className="app">
      <Sidebar active={pagina} onChange={setPagina} onConfig={() => setConfig(true)} />
      <main className="main">
        <ErrorBoundary key={pagina}>{render()}</ErrorBoundary>
      </main>
      <CampanitaAlertas />
      {config && <ConfigModal onClose={() => setConfig(false)} />}
    </div>
  );
}
