import {
  Activity,
  LayoutDashboard,
  Router,
  Server,
  Settings,
  Shield,
} from "lucide-react";

type OpenVpnStatus = "online" | "degraded" | "offline" | "checking";

type Props = {
  page: string;
  onPageChange: (page: string) => void;
  openVpnStatus?: OpenVpnStatus;
};

export function Sidebar({
  page,
  onPageChange,
  openVpnStatus = "checking",
}: Props) {
  const statusLabel = {
    online: "Online",
    degraded: "Degradado",
    offline: "Offline",
    checking: "A verificar...",
  }[openVpnStatus];

  return (
    <aside className="sidebar">
      <div className="brand">
        <img
          className="brand-logo"
          src="/src/assets/lr-logo.png"
          alt="LitoralRegas"
        />

        <div>
          <strong>OpenVPN Tool</strong>
        </div>
      </div>

      <nav>
        <button
          className={page === "dashboard" ? "active" : ""}
          onClick={() => onPageChange("dashboard")}
        >
          <LayoutDashboard size={18} />
          Dashboard
        </button>

        <button
          className={page === "routers" ? "active" : ""}
          onClick={() => onPageChange("routers")}
        >
          <Router size={18} />
          Routers
        </button>

        <button
          className={page === "clients" ? "active" : ""}
          onClick={() => onPageChange("clients")}
        >
          <Shield size={18} />
          Clientes OpenVPN
        </button>

        <button
          className={page === "deployments" ? "active" : ""}
          onClick={() => onPageChange("deployments")}
        >
          <Activity size={18} />
          Deployments
        </button>

        <button
          className={page === "servers" ? "active" : ""}
          onClick={() => onPageChange("servers")}
        >
          <Server size={18} />
          Servidor VPS
        </button>

        <button
          className={page === "settings" ? "active" : ""}
          onClick={() => onPageChange("settings")}
        >
          <Settings size={18} />
          Definições
        </button>
      </nav>

      <div className="status-card">
        <strong>Estado OpenVPN</strong>

        <p>
          <span className={`dot ${openVpnStatus}`} /> {statusLabel}
        </p>
      </div>
    </aside>
  );
}