import {
  SidebarGroup,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import type React from "react";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type { SidebarNavGroup } from "@/components/admin/common/AppShared";
import Link from "next/link";

export default function NavGroup({
  items,
}: SidebarNavGroup & { key?: React.Key }) {
  return (
    <SidebarGroup>
      <SidebarMenu>
        {items.map((item) => (
          <Tooltip key={item.path}>
            <TooltipTrigger
              render={
                <SidebarMenuItem>
                  <SidebarMenuButton
                    isActive={item.isActive}
                    render={<Link href={item?.path ?? "#"} />}
                  >
                    {item.icon}
                  </SidebarMenuButton>
                </SidebarMenuItem>
              }
            />
            <TooltipContent side="right">
              <p>{item.title}</p>
            </TooltipContent>
          </Tooltip>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}