"use client"
import * as React from "react"
import {
    IconInnerShadowTop,
    IconListDetails,
    IconAddressBook,
    IconUsers,
    IconBuilding,
    IconTypeface,
    IconMessageCircle,
    IconChartArea,
    IconCreditCard,
    IconBoxModel
} from "@tabler/icons-react"
import { NavMain } from "@/components/dashboard/nav-main"
import { NavSecondary } from "@/components/dashboard/nav-secondary"
import { NavUser } from "@/components/dashboard/nav-user"
import { NavDocuments } from "@/components/dashboard/nav-documents"

import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"

const data = {
    user: {
        name: "shadcn",
        email: "m@example.com",
        avatar: "https://avatars.githubusercontent.com/u/124599?v=4",
    },
    navMain: [
        {
            title: "Users",
            url: "/users",
            icon: IconUsers
        },
        {
            title: "People",
            url: "/people",
            icon: IconListDetails
        },
        {
            title: "Build",
            url: "/builds",
            icon: IconBuilding
        },
        {
            title: "Build Parts",
            url: "/build-parts",
            icon: IconBoxModel
        },
        {
            title: "Build Types",
            url: "/build-types",
            icon: IconTypeface
        },
        {
            title: "Build Addresses",
            url: "/build-address",
            icon: IconAddressBook
        },
        {
            title: "Build Sites",
            url: "/build-sites",
            icon: IconMessageCircle
        },
        {
            title: "Build Areas",
            url: "/build-areas",
            icon: IconChartArea
        },
        {
            title: "Build ibans",
            url: "/build-ibans",
            icon: IconCreditCard
        }
    ],
    navClouds: [
        // {
        //     title: "Capture",
        //     icon: IconCamera,
        //     isActive: true,
        //     url: "#",
        //     items: [
        //         {
        //             title: "Active Proposals",
        //             url: "#",
        //         },
        //         {
        //             title: "Archived",
        //             url: "#",
        //         },
        //     ],
        // },
        // {
        //     title: "Proposal",
        //     icon: IconFileDescription,
        //     url: "#",
        //     items: [
        //         {
        //             title: "Active Proposals",
        //             url: "#",
        //         },
        //         {
        //             title: "Archived",
        //             url: "#",
        //         },
        //     ],
        // },
        // {
        //     title: "Prompts",
        //     icon: IconFileAi,
        //     url: "#",
        //     items: [
        //         {
        //             title: "Active Proposals",
        //             url: "#",
        //         },
        //         {
        //             title: "Archived",
        //             url: "#",
        //         },
        //     ],
        // },
    ],
    navSecondary: [
        // {
        //     title: "Settings",
        //     url: "#",
        //     icon: IconSettings,
        // },
        // {
        //     title: "Get Help",
        //     url: "#",
        //     icon: IconHelp,
        // },
        // {
        //     title: "Search",
        //     url: "#",
        //     icon: IconSearch,
        // },
    ],
    documents: [
        // {
        //     name: "Data Library",
        //     url: "#",
        //     icon: IconDatabase,
        // },
        // {
        //     name: "Reports",
        //     url: "#",
        //     icon: IconReport,
        // },
        // {
        //     name: "Word Assistant",
        //     url: "#",
        //     icon: IconFileWord,
        // },
    ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    return (
        <Sidebar collapsible="offcanvas" {...props}>
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton
                            asChild
                            className="data-[slot=sidebar-menu-button]:p-1.5!"
                        >
                            <a href="#">
                                <IconInnerShadowTop className="size-5!" />
                                <span className="text-base font-semibold">Acme Inc.</span>
                            </a>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>
            <SidebarContent>
                <NavMain items={data.navMain} />
                <NavDocuments items={data.documents} />
                <NavSecondary items={data.navSecondary} className="mt-auto" />
            </SidebarContent>
            <SidebarFooter>
                <NavUser user={data.user} />
            </SidebarFooter>
        </Sidebar>
    )
}