import "./sidebar.css";
import React, { ReactNode } from "react";
import Link from "next/link";
import { IOptionalChildrenProps, ISlugProps } from "@/components/shared/props";

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

interface Props extends ISlugProps {
	sidebarEntries: Array<SidebarEntry>;
}

export default async function Sidebar({
	sidebarEntries,
	params: { 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>
	);
}
