import './sidebar.css'
import { Button, NavLink } from 'react-bootstrap';
import React, { ReactNode, useState } from 'react';
import Link from 'next/link';
import { headers } from 'next/headers';


export type SidebarEntry = {
    label:string;
    view:string;
  }

type Props = {
    children?:ReactNode;
    sidebarEntries:Array<SidebarEntry>;
    slug:string
}



export default async function Sidebar({children, sidebarEntries, slug}:Props){
    
    return (
        <div className='w-fit h[100%] drop-shadow-2xl shadow-xl'>
            <ul className={`navbar-light bg-light nav nav-pills flex-column mb-auto container-fluid h-[100%] items-start justify-start p-0 w-fit`}>
                {sidebarEntries.map((sidebarEntry)=>{
                    const activeClass:string = (slug == sidebarEntry.view) ? 'active' : '';
                    return <li 
                    key={sidebarEntry.view} 
                    className='nav-item w-[100%]'>
                        <Link 
                            href={`/admin/${sidebarEntry.view}`}
                            className={`${activeClass} nav-link m-2 whitespace-nowrap outline outline-1`}>
                            {sidebarEntry.label}
                        </Link></li>
                })}
            </ul>
        </div>
    );
}