"use client";

import * as React from "react";

import { NavMain } from "@/components/nav-main";
import { Sidebar, SidebarContent, SidebarRail } from "@/components/ui/sidebar";
import {
  TerminalIcon,
  TerminalSquareIcon,
  BookOpenIcon,
  PieChartIcon,
} from "lucide-react";
import { usePathname } from "next/navigation";

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>
  );
}