'use client'

import {useLocale} from 'next-intl'
import {useState} from 'react'

import {Link} from '@/i18n/routing'
import {data} from '@/lib/data'
import {Button} from '@/ui/button'

export default function NavbarMenu() {
	const bp = 'md'
	const locale = useLocale()
	const [menuOpened, setMenuOpened] = useState(false)

	function ToggleNavbar() {
		setMenuOpened(!menuOpened)
	}

	return (
		<>
			<div className={`hidden ${bp}:block w-full`}>
				<div className='flex items-center justify-between'>
					{data[locale === 'uk' ? 'headerMenus' : 'headerMenusRus'].map(
						item => (
							<Link
								href='/about-us'
								className='hover:[text-shadow:_0_1px_2px_rgb(99_102_241_/_0.6)]'
								key={item.name}
							>
								{item.name}
							</Link>
						)
					)}
				</div>
			</div>
			{/*<div className={`flex items-center ${bp}:hidden`}>
				<Button variant='ghost' onClick={ToggleNavbar}>
					{menuOpened ? <X /> : <MenuIcon />}
				</Button>
			</div>*/}
			{/*{menuOpened && (
				<div className={`${bp}:hidden`}>
					<div className='space-y-1 px-2 pb-3 pt-2'>
						<Link href={'#'}>Hidden Menu</Link>
					</div>
				</div>
			)}*/}
		</>
	)
}