import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { LayoutGrid, Activity, ClipboardCheck, ShieldAlert, FolderDot, ScrollText, MessageSquareWarning, Users } from 'lucide-react';
// import { Quiz } from 'lively-icons';
import AppLogo from './app-logo';

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
        icon: LayoutGrid,
    },
    // {
    //     title: 'Task',
    //     href: '/task',
    //     icon: Folder,
    // },
    {
        title: 'Residency Program',
        href: '/residency_program',
        icon: Activity,
    },
    {
        title: 'Survey',
        href: '/survey',
        icon: ClipboardCheck,
        children: [
            {
                title: 'Surveys',
                href: '/survey',
            },
            {
                title: 'Survey Answer',
                href: '/survey_answer',
            },
        ],
    },
    {
        title: 'Topic',
        href: '/topic',
        icon: FolderDot,
    },
    {
        title: 'Question',
        href: '/question',
        icon: ScrollText,
    },
    {
        title: 'Reported Issues',
        href: '/report_question',
        icon: MessageSquareWarning,
    },
    {
        title: 'User Report',
        href: '/user',
        icon: Users,
    },
    {
        title: 'Dynamic Page',
        href: '/dynamic_page',
        icon: ShieldAlert,
    },
];

const footerNavItems: NavItem[] = [
    //
];

export function AppSidebar() {
    return (
        <Sidebar collapsible="icon" variant="inset">
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild className='hover:bg-transparent'>
                            <Link href="/dashboard" prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <NavMain items={mainNavItems} />
            </SidebarContent>

            <SidebarFooter>
                <NavFooter items={footerNavItems} className="mt-auto" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}