<template>
	<Transition name="slide-up">
		<div v-if="visible" class="fixed bottom-0 inset-x-0 z-50 p-4">
			<UContainer>
				<div
					class="bg-white dark:bg-deep-900 rounded-xl shadow-2xl border border-default p-6"
				>
					<div class="flex flex-col lg:flex-row lg:items-center gap-4">
						<div class="flex-1">
							<h4 class="font-semibold">{{ title }}</h4>
							<p class="text-sm text-muted mt-1">
								{{ message }}
								<NuxtLink
									v-if="policyLink"
									:to="policyLink"
									class="text-primary hover:underline"
								>
									{{ policyLabel }}
								</NuxtLink>
							</p>
						</div>

						<div class="flex flex-wrap gap-3">
							<UButton
								v-if="hasCustomize"
								label="Customize"
								variant="ghost"
								@click="$emit('customize')"
							/>
							<UButton
								v-if="hasReject"
								label="Reject All"
								variant="outline"
								@click="reject"
							/>
							<UButton label="Accept All" @click="accept" />
						</div>
					</div>
				</div>
			</UContainer>
		</div>
	</Transition>
</template>

<script setup>
const props = defineProps({
	title: {
		type: String,
		default: "We use cookies",
	},
	message: {
		type: String,
		default: "We use cookies to improve your experience on our site.",
	},
	policyLink: {
		type: String,
		default: "/privacy",
	},
	policyLabel: {
		type: String,
		default: "Learn more",
	},
	hasCustomize: {
		type: Boolean,
		default: false,
	},
	hasReject: {
		type: Boolean,
		default: true,
	},
	storageKey: {
		type: String,
		default: "cookie-consent",
	},
});

const emit = defineEmits(["accept", "reject", "customize"]);

const visible = ref(false);

onMounted(() => {
	const consent = localStorage.getItem(props.storageKey);
	if (!consent) {
		visible.value = true;
	}
});

const accept = () => {
	localStorage.setItem(props.storageKey, "accepted");
	visible.value = false;
	emit("accept");
};

const reject = () => {
	localStorage.setItem(props.storageKey, "rejected");
	visible.value = false;
	emit("reject");
};
</script>

<style scoped>
.slide-up-enter-active,
.slide-up-leave-active {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
	transform: translateY(100%);
	opacity: 0;
}
</style>
