import { useState } from "react";
import { Dashboard } from "./Dashboard";
import { Devices } from "./Devices";

type Tab = "dashboard" | "devices";

export function App() {
  const [tab, setTab] = useState<Tab>("dashboard");

  return (
    <div className="app">
      <nav className="tabs">
        <button className={tab === "dashboard" ? "active" : ""} onClick={() => setTab("dashboard")}>
          Dashboard
        </button>
        <button className={tab === "devices" ? "active" : ""} onClick={() => setTab("devices")}>
          Devices
        </button>
      </nav>
      {tab === "dashboard" ? <Dashboard /> : <Devices />}
    </div>
  );
}