'use client'

import {useLocale} from 'next-intl'

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

export default function AppCatalogRender(items: Array<object>) {
	const locale = useLocale()

	return (
		<div className='flex w-full justify-center'>
			<div className='bw-dd-menu group inline-block w-full'>
				<Button className='py-13 flex h-10 w-full items-center rounded-sm border-none bg-brand-yellow-300 px-3 outline-none focus:outline-none'>
					<span className='flex-1 pr-1 font-semibold'>Каталог</span>
					<span>
						<svg
							className='h-4 w-4 transform fill-current transition duration-300 ease-in-out group-hover:-rotate-180'
							xmlns='http://www.w3.org/2000/svg'
							viewBox='0 0 20 20'
						>
							<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
						</svg>
					</span>
				</Button>
				<ul className='-bw-app-catalog-collapse mt-2 w-full min-w-32 origin-top transform rounded-sm border bg-white shadow-xl transition duration-300 ease-in-out group-hover:scale-100 hover:shadow-2xl'>
					{items?.items.map((item: any) => (
						<li
							className='cursor-pointer rounded-none py-2.5 pl-3 pr-1.5 text-sm font-medium hover:bg-[#442d88]/10 xl:py-3'
							key={item.id}
						>
							<button className='flex w-full items-center text-left outline-none focus:outline-none'>
								<Link
									className='flex-1 pr-1 leading-none xl:leading-[1.3]'
									href={`/category/${item.id}-${item.locales[locale === 'uk' ? 0 : 1].slug}`}
								>
									{item.locales[locale === 'uk' ? 0 : 1].title}
								</Link>
								<span className='mr-auto'>
									<svg
										className='h-4 w-4 fill-current transition duration-150 ease-in-out'
										xmlns='http://www.w3.org/2000/svg'
										viewBox='0 0 20 20'
									>
										<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
									</svg>
								</span>
							</button>
						</li>
					))}
				</ul>
			</div>
		</div>
	)
}