<template>
	<div
		v-if="consentGiven === false"
		class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg px-4 py-3 text-gray-800 z-50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4"
	>
		<p class="text-xs text-gray-600 sm:flex-1">
			{{ consentText }}
		</p>

		<div class="flex items-center gap-2 shrink-0">
			<Button
				href="/datenschutz"
				data-cy="cookie-banner-privacy"
				classes="bg-transparent border-transparent py-1.5 px-3 !text-xs !text-black hover:!bg-gray-100 shadow-none"
			>
				Datenschutzerklärung
			</Button>
			<Button @click="acceptCookies" data-cy="cookie-banner-accept" classes="bg-gray-800 py-1.5 px-4 !text-xs whitespace-nowrap">
				Akzeptieren
			</Button>
		</div>
	</div>
</template>

<script setup lang="ts">
const COOKIE_CONSENT_KEY = "shop:cookie-consent";

const props = withDefaults(
	defineProps<{
		consentText?: string;
	}>(),
	{
		consentText:
			"Wir verwenden notwendige Cookies für die sichere Zahlungsabwicklung. Weitere Informationen finden Sie in unserer Datenschutzerklärung:"
	}
);

const emit = defineEmits<{
	"consent-given": [];
}>();

// Start with null to prevent SSR flash - banner only renders after client check
const consentGiven = ref<boolean | null>(null);

// Check localStorage only on client
onMounted(() => {
	consentGiven.value = !!localStorage.getItem(COOKIE_CONSENT_KEY);
});

function acceptCookies() {
	localStorage.setItem(COOKIE_CONSENT_KEY, new Date().toISOString());
	consentGiven.value = true;
	emit("consent-given");
}
</script>
