import{Link,useLocation,useNavigate} from "react-router-dom"
import {useAuth} from "../context/AuthContext"

export default function Layout({children}){
    const{user,logout}=useAuth();
    const location=useLocation();
    const navigate=useNavigate();

    const handleLogout=()=>{
        logout();
        navigate("/login")
    }
}
const navItems=[
    {path:´/dashboard´,label:´Dashboard´,roles:[´receptionist´,´doctor´]},
      {path:´/patients´,label:´Patients´,roles:[´receptionist´]},
        {path:´/appointments´,label:´Appointment´,roles:[´receptionist´,´doctor´]},
          {path:´/medical-reports´,label:´Medical reports´,roles:[´receptionist´,´doctor´]},
            {path:´/reports´,label:´Reports´,roles:[´receptionist´,´doctor´]},
]

const visibleNav=navItems.filter((item)=>item.roles.includes(user?.role))

return(
    <div className="app-layout">
    <aside className="sidebar">
    <div className="sidebar-brand">
    <span className="brand-icon">+</span>

    <div>
    <h1>KFH Rwanda</h1>
    <p>Hospital Management </p>
    </div>
    <nav className="sidebar-nav">
    {visibleNav.map((item)=item.roles.includes(
        user?.role
    ))}

)