---
import type { LogoType, NavbarElement } from '@webtypes/Config';
import Logo from '@components/logos/Logo.astro';
import Icon from '@components/icons/Icon.astro';
import ScreenOverlay from './ScreenOverlay.astro';
import Header from './Header.astro';
import Tag from './Tag.astro';
import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro';

interface Props {
	element: NavbarElement
	index: number
}

const {
	element,
	index,
} = Astro.props;
---

	<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
		<label for={`navbar-input-${index}`} class="group">

			{element.path
				? (
					<a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
						{element.text && element.text}
						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
						{element.dropdown && <Icon icon="chevron-down" />}
					</a>
					)
				: (
					<p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
						{element.text && element.text}
						{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
						{element.dropdown && <Icon icon="chevron-down" />}
					</p>
					)}

			{element.dropdown && (
				<ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
					<input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
					<div class={`
				transition-opacity
                fixed md:absolute right-0 max-sm:bottom-0
                max-sm:overflow-hidden
                max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen
                pointer-events-none opacity-0

                md:top-full md:right-0

                group-focus-within:pointer-events-auto group-focus-within:opacity-100
                focus-within:pointer-events-auto focus-within:opacity-100
                hover:pointer-events-auto hover:opacity-100
            `}
					>
						<ScrollbarOverlayContainer
							tabindex="-1"
							class={`
                    bg-gray-50
                    rounded-t-lg md:rounded-lg
                    transition-transform
                    max-sm:translate-y-1/3 max-sm:left-0
                    group-focus-within:translate-y-0
                    max-h-full md:max-h-96 overflow-y-auto
					md:shadow-lg
                `}
						>
							<ul class="p-4">
								{element.dropdown.map(item => (
									<li>
										<a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
										<div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50">
										<div class="w-[36px]">
										{item.logo && <Logo size={40} logo={item.logo} />}
         </div>

										<div class="flex flex-col justify-start items-start">
										<div class="flex flex-row gap-2">
										<Header size="sm" class="text-gray-800">{item.name}</Header>
										{item.tag && <Tag>{item.tag}</Tag>}
         </div>
										<p class="text-sm text-gray-400 font-light">{item.description}</p>
         </div>
         </div>
         </a>
         </li>
								))}
							</ul>
						</ScrollbarOverlayContainer>
					</div>
			)}
		</label>
	</li>