"use client";
import Sidebar from "@/components/Sidebar";
import { Plus } from "lucide-react";
import AddSite from "@/components/dialogues/AddSite";

interface SitesPageProps {
    username: string;
    name: string;
}


export default function SitesPage({ username, name }: SitesPageProps) {
    return (
        <Sidebar 
            username={username} 
            fullName={name} 
            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites']}
        >
            <main>
                <div className="flex gap-4 items-center">
                    <div className="flex-1">
                        <h1 className="text-2xl font-bold">Sites</h1>
                        <p className="text-sm opacity-70">Manage your sites. Sites are real-world locations where you can monitor your assets & add networks.</p>
                    </div>
                    <button className="btn btn-primary" onClick={() => document.getElementById('add_site')?.showModal()}>
                        <Plus className="w-5 h-5" />
                        Add Site
                    </button>
                </div>

                <AddSite />
            </main>
        </Sidebar>
    )
}