"use client"
import Sidebar from "@/components/Sidebar";
import useSite from "@/hooks/useSite";
import { useEffect } from "react";

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

export default function SitesPage({ username, name, siteId }: SitesPageProps) {
    const { site, loadSite, setSiteId } = useSite();
    useEffect(() => {
        console.log(siteId);
        if (siteId) {
            setSiteId(siteId);
        }
    }, [siteId, setSiteId]);
    return (
        <Sidebar 
            username={username} 
            fullName={name} 
            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites', siteId]}
        >
            <main>
                <div className="flex gap-4 items-center">
                    <div className="flex-1">
                        <h1 className="text-2xl font-bold">Site - {site.name}</h1>
                        <p className="text-sm opacity-70">
                            Description: {site.description}
                        </p>
                    </div>
                </div>
            </main>
        </Sidebar>
    )
}