"use client";

import "@/css/admin-style.css";
import { ReactNode, useState, useEffect } from "react";

import Sidebar from "@/components/common/Sidebar";
import AdminNavbar from "@/components/common/AdminNabvar";

export default function StudentDashboardLayout({
  children,
}: {
  children: ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const [studentName, setStudentName] = useState<string>("");

  useEffect(() => {
    const fetchStudent = async () => {
      try {
        const res = await fetch("/api/student/me");
        const json = await res.json();
        setStudentName(json?.data?.name || "");
      } catch (error) {
        console.log(error);
      }
    };

    fetchStudent();
  }, []);

  return (
    <div className="dashboard-layout">
      <Sidebar
        role="student"
        collapsed={collapsed}
        setCollapsed={setCollapsed}
      />

      <div className="d-flex flex-column dashboard-content w-100">
        <AdminNavbar
          role="student"
          name={studentName}
          collapsed={collapsed}
          setCollapsed={setCollapsed}
        />

        <main>{children}</main>
      </div>
    </div>
  );
}