<template>
	<Transition name="slide-down">
		<div v-if="visible" :class="['relative z-50', bgClasses]">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
				<div class="flex items-center justify-center gap-x-4 text-sm">
					<!-- Icon -->
					<UIcon v-if="icon" :name="icon" class="w-5 h-5 flex-shrink-0" />

					<!-- Message -->
					<p class="text-center">
						<span v-if="badge" class="font-semibold mr-2">{{ badge }}</span>
						<span>{{ message }}</span>
					</p>

					<!-- CTA Link -->
					<NuxtLink
						v-if="link"
						:to="link"
						class="inline-flex items-center gap-1 font-medium hover:underline underline-offset-2"
					>
						{{ linkText }}
						<UIcon name="i-lucide-arrow-right" class="w-4 h-4" />
					</NuxtLink>

					<!-- Close Button -->
					<button
						v-if="dismissible"
						class="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
						@click="dismiss"
					>
						<UIcon name="i-lucide-x" class="w-4 h-4" />
						<span class="sr-only">Dismiss</span>
					</button>
				</div>
			</div>
		</div>
	</Transition>
</template>

<script setup>
const props = defineProps({
	/** Main message text */
	message: {
		type: String,
		default: "🎉 New feature available — check it out!",
	},
	/** Optional badge/label before message */
	badge: {
		type: String,
		default: "",
	},
	/** Icon name to display */
	icon: {
		type: String,
		default: "",
	},
	/** CTA link URL */
	link: {
		type: String,
		default: "",
	},
	/** CTA link text */
	linkText: {
		type: String,
		default: "Learn more",
	},
	/** Color variant */
	variant: {
		type: String,
		default: "primary",
		validator: (v) =>
			["primary", "neutral", "success", "warning", "error"].includes(v),
	},
	/** Allow dismissing the bar */
	dismissible: {
		type: Boolean,
		default: true,
	},
	/** Storage key for dismissed state */
	storageKey: {
		type: String,
		default: "announcement-dismissed",
	},
});

const emit = defineEmits(["dismiss"]);

const visible = ref(true);

onMounted(() => {
	if (props.dismissible && props.storageKey) {
		const dismissed = localStorage.getItem(props.storageKey);
		if (dismissed) {
			visible.value = false;
		}
	}
});

const dismiss = () => {
	if (props.storageKey) {
		localStorage.setItem(props.storageKey, "true");
	}
	visible.value = false;
	emit("dismiss");
};

const bgClasses = computed(() => {
	const variants = {
		primary: "bg-primary-500 text-white",
		neutral:
			"bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900",
		success: "bg-green-500 text-white",
		warning: "bg-yellow-500 text-neutral-900",
		error: "bg-red-500 text-white",
	};
	return variants[props.variant];
});
</script>

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

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