"use client";
import Sidebar from "@/components/Sidebar";
import { Plus } from "lucide-react";
import AddSite from "@/components/dialogues/AddSite";
import Sites from "@/components/cards/Sites";
import axios from "axios";
import { useEffect, useState } from "react";

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


export default function SitesPage({ username, name }: SitesPageProps) {
    const [sites, setSites] = useState([]);
    useEffect(() => {
        axios.get('/api/sites/get_all').then((response) => {
            setSites(response.data.sites);
        });
    }, []);
    
    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 />
                <div className="flex flex-col gap-4 pt-4">
                    {sites.map((site: any) => (
                        <Sites key={site.id} id={site.id} name={site.name} description={site.description} networks={site.networks} />
                    ))}
                </div>
            </main>
        </Sidebar>
    )
}