"use client"

import { Icons } from "@/components/icons"
import { SidebarNavItem } from "@/types"
import { User } from "next-auth"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "./ui/button"

export const MobileNav = ({ items, user }: { items: SidebarNavItem[], user: User | undefined }) => {
    const path = usePathname()

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

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

    return (
        <nav className={`container flex flex-row items-center h-full w-full max-w-lg justify-between mx-auto`}>
            {visibleItems.map((item, index) => {
                const Icon = Icons[item.icon || "arrowRight"]
                if (item.title === "My Profile") {
                    item.href = `/${user?.username}`
                }
                return (
                    item.href && (
                        <Link key={index} href={item.disabled ? "/" : item.href} className="inline-flex items-center justify-center w-full h-full">
                            <Button variant={`${path.startsWith(item.href) ? "secondary" : "ghost"}`} size="logo">
                                <Icon />
                            </Button>
                        </Link>
                    )
                )
            })}
        </nav>
    )
}