import * as React from "react";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
} from "@/components/ui/sidebar";
import Link from "next/link";
import SidebarLink from "@/components/layout/sidebar-link";
import { Button } from "@/components/ui/button";
import { LogOutIcon } from "lucide-react";
import { appConfig } from "@/config/app.config";

const data = {
  navMain: [
    {
      title: "Benutzer",
      url: "/admin",
      items: [
        // {
        //   title: "Team Mitglieder",
        //   url: "/admin/team",
        // },
        {
          title: "Alle Benutzer",
          url: "/admin/benutzer",
        },
      ],
    },
  ],
};

export function AdminSidebar({
  ...props
}: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar {...props}>
      <SidebarHeader className="flex h-14 items-center justify-center border-b">
        <Link href={"/admin"}>
          <span className="text-2xl font-bold">{appConfig.name}</span>
        </Link>
      </SidebarHeader>
      <SidebarContent>
        {/* We create a SidebarGroup for each parent. */}
        {data.navMain.map((item) => (
          <SidebarGroup key={item.title}>
            <SidebarGroupLabel>{item.title}</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {item.items.map((item) => (
                  <SidebarLink key={item.title} {...item} />
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
      <SidebarFooter>
        <Button
          asChild
          variant={"destructive"}
          className="border-2 bg-sidebar text-foreground hover:text-destructive-foreground"
        >
          <Link href={"/"}>
            <LogOutIcon className="size-4 rotate-180" /> Verlassen
          </Link>
        </Button>
      </SidebarFooter>
    </Sidebar>
  );
}
