<template>
	<component
		:is="to ? 'NuxtLink' : 'article'"
		:to="to"
		:class="[
			'group relative aspect-[9/16] rounded-2xl overflow-hidden cursor-pointer block',
			{ 'xHover-lift': hoverable },
		]"
		@click="!to && $emit('click')"
	>
		<!-- Background Image -->
		<img
			:src="img.src"
			:alt="img.alt || ''"
			class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.08]"
		/>

		<!-- Overlay -->
		<div class="absolute inset-0" :class="overlayClasses" />

		<!-- Content -->
		<div :class="['absolute inset-0 p-6 flex flex-col', alignmentClasses]">
			<!-- Badge -->
			<span
				v-if="badge"
				class="inline-flex self-start px-3 py-1 rounded-full text-xs font-medium bg-white/20 text-white backdrop-blur-sm"
			>
				{{ badge }}
			</span>

			<!-- Spacer -->
			<div class="flex-1" />

			<!-- Text Content -->
			<div class="space-y-3">
				<h3 :class="['font-semibold text-white', titleSizeClass]">
					{{ title }}
				</h3>

				<div v-if="$slots.default" class="text-white/80 text-sm">
					<slot />
				</div>

				<div
					v-if="buttonLabel && to"
					class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium bg-white text-neutral-900 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-white/50"
				>
					{{ buttonLabel }}
				</div>

				<button
					v-if="buttonLabel && !to"
					class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium bg-white text-neutral-900 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-white/50"
				>
					{{ buttonLabel }}
				</button>
			</div>
		</div>
	</component>
</template>

<script setup>
defineEmits(["click"]);

const props = defineProps({
	/** Navigation URL (uses NuxtLink) */
	to: {
		type: String,
		default: "",
	},
	/** Image object { src: string, alt?: string } */
	img: {
		type: Object,
		default: () => ({
			src: "",
			alt: "Promo image",
		}),
		validator: (v) => !v || typeof v.src === "string",
	},
	/** Card title */
	title: {
		type: String,
		default: "Promo Card Title",
	},
	/** Optional badge text */
	badge: {
		type: String,
		default: "",
	},
	/** Button object { label: string, color?: string, variant?: string } */
	button: {
		type: Object,
		default: null,
		validator: (v) => !v || v.label !== undefined,
	},
	/** Content alignment */
	align: {
		type: String,
		default: "bottomLeft",
		validator: (v) =>
			["bottomLeft", "bottomRight", "bottomCenter", "topLeft"].includes(v),
	},
	/** Overlay style */
	overlay: {
		type: String,
		default: "gradient",
		validator: (v) => ["light", "heavy", "gradient"].includes(v),
	},
	/** Enable lift on hover */
	hoverable: {
		type: Boolean,
		default: true,
	},
	/** Title text size (Tailwind sizes) */
	titleSize: {
		type: String,
		default: "xl",
		validator: (v) =>
			[
				"xs",
				"sm",
				"base",
				"lg",
				"xl",
				"2xl",
				"3xl",
				"4xl",
				"5xl",
				"6xl",
				"7xl",
				"8xl",
			].includes(v),
	},
});

const buttonLabel = computed(() => props.button?.label || "");

const overlayClasses = computed(() => {
	const overlays = {
		light: "bg-black/30",
		heavy: "bg-black/60",
		gradient: "bg-gradient-to-t from-black/80 via-black/30 to-transparent",
	};
	return overlays[props.overlay];
});

const alignmentClasses = computed(() => {
	const alignments = {
		bottomLeft: "justify-end items-start text-left",
		bottomRight: "justify-end items-end text-right",
		bottomCenter: "justify-end items-center text-center",
		topLeft: "justify-start items-start text-left",
	};
	return alignments[props.align];
});

const titleSizeClass = computed(() => {
	const sizes = {
		xs: "text-xs",
		sm: "text-sm",
		base: "text-base",
		lg: "text-lg",
		xl: "text-xl",
		"2xl": "text-2xl",
		"3xl": "text-3xl",
		"4xl": "text-4xl",
		"5xl": "text-5xl",
		"6xl": "text-6xl",
		"7xl": "text-7xl",
		"8xl": "text-8xl",
	};
	return sizes[props.titleSize] || "text-xl";
});
</script>
