'use client'

import { FC, ReactNode, useState } from 'react'
import { ChevronDown } from 'lucide-react'
import { ILink } from '@/lib/interfaces'

interface IProps extends ILink {
    links: ILink[];
}

export const NavDropdown: FC<IProps> = ({ label, link, links }): ReactNode => {
    const [isOpen, setIsOpen] = useState<boolean>(false)

    return <li
        className="relative hover:bg-amber-500 px-3 py-2"
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
    >
        <a href={link} className="flex items-center gap-1">{label} {links.length > 0 && <ChevronDown size={'13px'}/>}</a>
        {isOpen && links.length > 0 && <ul className="list-none shadow text-amber-600 bg-white absolute top-full left-0 z-20 m-0 p-4 grid grid-cols-3 min-w-30 w-150 gap-4">
            {links.map(({link, label}, i) => <li key={i}>
                <a href={link} className="transition-colors ease-in duration-150 hover:text-[#888]">{label}</a>
            </li>)}
        </ul>}
    </li>
}