"use client"

import { Icons, IconsType } from "@/components/icons"
import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { SidebarNavItem } from "@/types"
import { useSession } from "next-auth/react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { ModeToggle } from "./mode-toggle"

interface DashboardNavProps {
    items: SidebarNavItem[]
}

export default function DashboardNav({ items }: DashboardNavProps) {
    const path = usePathname()
    const { data: session } = useSession()

    if (!items?.length) {
        return null
    }

    const visibleItems = session ? items : items.slice(0, 2)

    return (
        <nav className="grid items-start gap-2">
            {visibleItems.map((item, index) => {
                const Icon = Icons[item.icon as keyof IconsType || "arrowRight"]
                if (item.title === "My Profile") {
                    item.href = `/${session?.user?.username}`
                }
                return (
                    item.href && (
                        <Link key={index} href={item.disabled ? "/" : item.href} className={item.title === "Settings" ? "mt-10" : ""}>
                            <span
                                className={cn(
                                    "group flex items-center rounded-md px-3 py-2 font-medium hover:bg-accent hover:text-accent-foreground",
                                    path === item.href ? "bg-accent" : "transparent",
                                    item.disabled && "cursor-not-allowed opacity-80"
                                )}
                            >
                                <Icon className="mr-3 h-5 w-5" />
                                <span>{item.title}</span>
                            </span>
                        </Link>
                    )
                )

            })}
            <ModeToggle />
            {!session && (
                <div className="mt-24 space-y-3 justify-center text-center">
                    <Link href="/login" className={cn(buttonVariants({ size: "lg" }), "w-full")}>
                        Log In
                    </Link>
                    <Link href="/signup" className={cn(buttonVariants({ size: "lg", variant: "outline" }), "w-full")}>
                        Sign Up
                    </Link>
                    <h4 className="text-sm">
                        Unlock endless possibilities - sign up or log in to unleash the full potential of our website.
                    </h4>
                </div>
            )}
        </nav>
    )
}