<template>
	<UHeader
		title=""
		:ui="{
			root: headerClasses,
		}"
	>
		<template #title />
		<template #left>
			<UNavigationMenu :items="navLinks" />
		</template>

		<template #center>
			<NuxtLink to="/" class="flex items-center">
				<slot name="logo">
					<span class="text-xl font-bold">LOGO</span>
				</slot>
			</NuxtLink>
		</template>

		<template #right>
			<UButton
				v-if="secondaryCta"
				:to="secondaryCta.to"
				variant="ghost"
				color="neutral"
				:label="secondaryCta.label"
			/>
			<UButton
				v-if="primaryCta"
				:to="primaryCta.to"
				variant="solid"
				color="primary"
				:label="primaryCta.label"
			/>
		</template>
	</UHeader>
</template>

<script setup>
const props = defineProps({
	navLinks: {
		type: Array,
		default: () => [],
	},
	primaryCta: {
		type: Object,
		default: null,
	},
	secondaryCta: {
		type: Object,
		default: null,
	},
	transparent: {
		type: Boolean,
		default: false,
	},
});

const headerClasses = computed(() => {
	return props.transparent
		? "bg-transparent text-white"
		: "bg-white dark:bg-deep-950";
});
</script>