'use client'

import {Category} from '@prisma/client'
import {useLocale} from 'next-intl'

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

export default function AppCatalogRender(data: {items: Category[]}) {
	const locale = useLocale()

	return (
		<div className='flex w-full justify-center'>
			<div className='bw-dd-menu b group inline-block w-full'>
				<Link href='/catalog'>
					<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>
				</Link>
				<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'>
					{data?.items.map((item: any) => (
						<li
							className='pay-2.5 cursor-pointer rounded-none pl-3 pr-1.5 text-sm font-medium hover:bg-[#442d88]/10 xl:py-2'
							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.275]'
									href={`/category/${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>
	)
}