"use client";
import * as React from "react";

import { NavMain } from "./nav-main";

import { NavSecondary } from "./nav-secondary";
import { NavUser } from "./nav-user";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
} from "@/components/ui/sidebar";

import { User } from "next-auth";
import NavTeamSection from "./nav-team-section";
import NavBranding from "./nav-branding";
import { Icons } from "@/components/icons";
import { appConfig, appRoutes } from "@/config";
import { Info } from "lucide-react";

export function AppSidebar({
  ...props
}: React.ComponentProps<typeof Sidebar> & { user?: User | null }) {
  return (
    <Sidebar variant="inset" className="border-r" {...props}>
      <SidebarHeader>
        <NavBranding subTitle="Wissen" />
      </SidebarHeader>
      <SidebarContent>
        <NavMain />

        <NavSecondary items={data.navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarFooter>
        {props?.user && <NavTeamSection userRole={props.user.role} />}
        <NavUser user={props.user} />{" "}
      </SidebarFooter>
    </Sidebar>
  );
}

const data = {
  navSecondary: [
    {
      title: "Discord",
      url: appConfig.socials.discord,
      icon: Icons.discord,
      external: true,
    },
    {
      title: `Was ist ${appConfig.name}`,
      url: appRoutes.about,
      icon: Info,
    },
  ],
};