"use client";

import * as React from "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";
import {
  GalleryVerticalEndIcon,
  AudioLinesIcon,
  TerminalIcon,
  TerminalSquareIcon,
  BotIcon,
  BookOpenIcon,
  Settings2Icon,
  FrameIcon,
  PieChartIcon,
  MapIcon,
} from "lucide-react";
import { usePathname } from "next/navigation";

/*
(property) items: {
    title: string;
    url: string;
    icon?: React.ReactNode;
    isActive?: boolean;
    items?: {
        title: string;
        url: string;
    }[];
}[]
*/

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const checkActive = (url: string) => {
    // /dashboard
    const pathname = usePathname();
    return pathname === url;
  };

  // Dashboard
  // Write (Blogs)
  // SSH
  // Scripts
  const items = [
    {
      title: "Dashboard",
      url: "/dashboard",
      icon: <PieChartIcon className="h-4 w-4" />,
      isActive: checkActive("/dashboard"),
    },
    {
      title: "Write",
      url: "/write",
      icon: <BookOpenIcon className="h-4 w-4" />,
      isActive: checkActive("/write"),
    },
    {
      title: "SSH",
      url: "/ssh",
      icon: <TerminalSquareIcon className="h-4 w-4" />,
      isActive: checkActive("/ssh"),
    },
    {
      title: "Scripts",
      url: "/scripts",
      icon: <TerminalIcon className="h-4 w-4" />,
      isActive: checkActive("/scripts"),
    },
  ];
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarContent>
        <NavMain items={items} />
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  );
}