import { Metric } from "../components/Metric";
import type { RouterItem } from "../types/router";

export function DashboardPage({ routers }: { routers: RouterItem[] }) {
  return (
    <>
      <div className="page-header">
        <div>
          <h1>Dashboard</h1>
          <p>Overview of your OpenVPN infrastructure</p>
        </div>
        <button className="health">System Healthy</button>
      </div>

      <div className="cards">
        <Metric title="Routers" value={routers.length} />
        <Metric title="OpenVPN Clients" value="-" />
        <Metric title="VPS Servers" value="1" />
        <Metric title="Deployments" value="-" />
      </div>
    </>
  );
}