import { useState } from "react";
import { Plus } from "lucide-react";
import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
import AdminHero from "@/src/components/general/admin-hero";
import AdminButton from "@/src/components/general/admin-button";
import Stack from "@/src/components/twui/layout/Stack";
import { SiteData } from "@/src/data/site-data";
import ClientsTableSection from "./(sections)/clients-table-section";

export default function AdminClientsPage() {
    const [addOpen, setAddOpen] = useState(false);

    return (
        <>
            <AdminHero
                title="Clients"
                description="Manage WireGuard peers and their configurations"
                buttons={
                    <AdminButton
                        variant="primary"
                        Icon={Plus}
                        onClick={() => setAddOpen(true)}
                    >
                        Add client
                    </AdminButton>
                }
            />
            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
                <ClientsTableSection
                    addOpen={addOpen}
                    setAddOpen={setAddOpen}
                />
            </Stack>
        </>
    );
}

export const meta: BunextPageModuleMeta = {
    title: `Clients | ${SiteData["SiteName"]}`,
    description: `Manage WireGuard clients`,
};