"use client";

import * as React from "react";
import {
	AudioWaveform,
	BookOpen,
	Bot,
	Command,
	Users,
	GalleryVerticalEnd,
	Settings2,
	Calendar,
} from "lucide-react";

import { NavMain } from "@/components/nav-main";
import { NavProjects } from "@/components/nav-projects";
import { NavUser } from "@/components/nav-user";
import { TeamSwitcher } from "@/components/team-switcher";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarHeader,
	SidebarRail,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
	user: {
		name: "shadcn",
		email: "m@example.com",
		avatar: "/avatars/shadcn.jpg",
	},
	teams: [
		{
			name: "Latosa-Escrima",
			logo: GalleryVerticalEnd,
			plan: "",
		},
		{
			name: "Wing-Tsun",
			logo: Command,
			plan: "",
		},
	],
	navMain: [
		{
			title: "Membres",
			url: "/dashboard/members",
			icon: Users,
			isActive: true,
			items: [
				{
					title: "Création d'un membre",
					url: "/dashboard/members/new",
				},
			],
		},
		{
			title: "Planning",
			url: "/dashboard/planning",
			icon: Calendar,
		},
		{
			title: "Blogs",
			url: "/dashboard/blogs",
			icon: BookOpen,
			items: [
				{
					title: "Catégorie 1",
					url: "/dashboard/blogs/categorie-1",
				},
				{
					title: "Catégorie 2",
					url: "/dashboard/blogs/categorie-2",
				},
				{
					title: "Nouvelle catégorie",
					url: "/dashboard/blogs/categories/new",
				},
				{
					title: "Nouvel article",
					url: "/dashboard/blogs/new",
				},
			],
		},
		{
			title: "Settings",
			url: "/dashboard/settings",
			icon: Settings2,
		},
	],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
	return (
		<Sidebar collapsible="icon" {...props}>
			<SidebarHeader>
				<TeamSwitcher teams={data.teams} />
			</SidebarHeader>
			<SidebarContent>
				<NavMain items={data.navMain} />
			</SidebarContent>
			<SidebarFooter>
				<NavUser user={data.user} />
			</SidebarFooter>
			<SidebarRail />
		</Sidebar>
	);
}