"use client";
import {
  Logs,
  ChartArea,
  DockIcon,
  ListStart,
  BotIcon,
  KeyIcon,
  Wallet,
} from "lucide-react";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
  SidebarProvider,
} from "@/components/ui/sidebar";

// Menu items.
const items = [
  {
    title: "Main",
    url: "#",
    icon: ListStart,
  },
  {
    title: "Chatbots",
    url: "#",
    icon: BotIcon,
  },

  {
    title: "API keys",
    url: "#",
    icon: KeyIcon,
  },
  {
    title: "wallet",
    url: "#",
    icon: Wallet,
  },
  {
    title: "Cost chart",
    url: "#",
    icon: ChartArea,
  },
  {
    title: "Usage log",
    url: "#",
    icon: Logs,
  },
  {
    title: "OpenAI",
    url: "#",
    icon: DockIcon,
  },
];

export function AppSidebar() {
  return (
    <>
      <SidebarProvider
        style={
          {
            "--sidebar-width": "calc(var(--spacing) * 72)",
            "--header-height": "calc(var(--spacing) * 12)",
          } as React.CSSProperties
        }
      >
        <Sidebar>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Application</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton asChild>
                        <a href={item.url}>
                          <item.icon />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
      </SidebarProvider>
    </>
  );
}
