<template>
	<div
		class="flex flex-col h-12 mt-2 mx-2 p-2 transition-all duration-500 ease-in-out hover:h-70 bg-yellow-50"
		@mouseenter="hoverd = true"
		@mouseleave="hoverd = false"
	>
		<div class="flex rounded-md justify-evenly w-full items-start">
			<nav class="flex flex-row w-full items-center">
				<h1 class="text-2xl mx-2 font-black">Ghaem Ghh</h1>
				<div class="flex flex-row justify-center gap-10 w-[60%]">
					<h1 @mouseenter="ChangeState('Product')" class="nav-list">
						Products
					</h1>
					<h1 @mouseenter="ChangeState('Solution')" class="nav-list">
						Solutions
					</h1>
					<h1 @mouseenter="ChangeState('Center')" class="nav-list">
						Knowledge Center
					</h1>
					<h1 @mouseenter="ChangeState('Company')" class="nav-list">Company</h1>
				</div>
				<div class="flex flex-row w-[30%] justify-center gap-10">
					<button class="nav-list">Contanct Us</button>
					<button class="bg-gray-950 text-amber-50 p-1 px-4 rounded-lg">
						Get Started
					</button>
				</div>
			</nav>
		</div>
		<TransitionGroup
			enter-active-class="transition-all duration-500 ease-out"
			enter-from-class="opacity-0 translate-y-3 blur-xl"
			enter-to-class="opacity-100 translate-y-0 blur-none"
			leave-active-class="transition-all duration-400 ease-in"
			leave-from-class="opacity-100 translate-y-0 blur-none"
			leave-to-class="opacity-0 translate-y-0 blur-xl"
		>
			<div v-if="hoverd" class="flex flex-col justify-between w-full">
				<div
					v-for="a in 1"
					:key="a"
					class="flex flex-row justify-evenly mt-10 gap-10"
				>
					<div>
						<h1 class="font-mono text-sm font-light">
							1-{{ selecteddata }} Header
						</h1>
						<p
							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
						>
							Link to an {{ selecteddata }}
						</p>
						<p
							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
						>
							Link to an another {{ selecteddata }}
						</p>
					</div>
					<div>
						<h1 class="font-mono text-sm font-light">
							2-{{ selecteddata }} Header
						</h1>
						<p
							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
						>
							Buy me a cup of {{ selecteddata }}
						</p>
						<p
							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
						>
							I can't think of any {{ selecteddata }}
						</p>
					</div>
					<div>
						<h1 class="font-mono text-sm font-light">
							3-{{ selecteddata }} Header
						</h1>
						<p
							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
						>
							I guess it is {{ selecteddata }}
						</p>
						<p
							class="text-xl hover:bg-amber-200 px-2 rounded-xl mt-2 font-semibold"
						>
							Not yet i {{ selecteddata }}
						</p>
					</div>
					<div
						class="w-60 rounded-xl grayscale-25 h-45 bg-linear-to-r from-amber-500 to-blue-500"
					>
						Nothing
					</div>
				</div>
			</div>
		</TransitionGroup>
	</div>
</template>
<script setup>
	import { nextTick, ref } from "vue";
	const selecteddata = ref("Product");
	const hoverd = ref(false);
	const randomnumber = ref(0);
	async function ChangeState(text) {
		selecteddata.value = text;
		hoverd.value = false;
		await nextTick;
		hoverd.value = true;
	}
</script>
