'use client'
import Link from 'next/link'
import {usePathname} from 'next/navigation'
import React, {ReactNode} from 'react'
import {IoIosArrowForward} from 'react-icons/io'

interface Props {
    title: string
    icon: ReactNode
    url: string
    index: number
    submenus: {
        title: string
        url: string
    }[] | null
    currentOpen: number | null
    setCurrentOpen: (index: number | null) => void
}

export default function SidebarMenu({
                                        title,
                                        icon,
                                        url,
                                        submenus,
                                        currentOpen,
                                        index,
                                        setCurrentOpen,
                                    }: Props) {
    const pathname = usePathname()
    const open = currentOpen === index

    return (
        <li className="mb-1 group">
            <Link
                href={url}
                className={`flex font-semibold items-center py-2 px-4 hover:bg-neutral-200 dark:hover:bg-slate-950 rounded-md transition-all duration-500 ${open ? 'bg-neutral-200 dark:bg-slate-950' : ''}`}
                onClick={(e) => {
                    if (submenus && submenus.length > 0) {
                        e.preventDefault()
                        setCurrentOpen(index === currentOpen ? null : index)
                    }
                }}
            >
                <i className="mr-3 text-lg">{icon}</i>
                <span className="text-sm">{title}</span>
                {submenus && submenus.length > 0 && (
                    <i
                        className={`ml-auto transition-transform transform duration-500 ${open ? 'rotate-90' : ''}`}
                    >
                        <IoIosArrowForward/>
                    </i>
                )}
            </Link>

            <ul
                className={
                    `pl-7 mt-2 transition-max-height ease-in-out duration-500 overflow-hidden bg-neutral-200 dark:bg-slate-950 rounded-md ${open ? 'max-h-125 ' : 'max-h-0'}`}
                style={{transitionProperty: 'max-height, opacity'}}
            >
                {submenus?.map((submenu, i) => (
                    <li key={i} className="my-3">
                        <Link
                            href={submenu.url}
                            className={`text-sm flex items-center hover:text-[#f84525] before:content-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3 transition-all duration-500 ${pathname === submenu.url ? 'text-red-600' : ''}`}
                        >
                            {submenu.title}
                        </Link>
                    </li>
                ))}
            </ul>
        </li>
    )
}