<template>
	<nav class="grid sm:grid-cols-2 gap-4 pt-8 border-t border-neutral-200 dark:border-neutral-800">
		<!-- Previous -->
		<UButton
			v-if="previous"
			:to="getPostUrl(previous)"
			variant="ghost"
			color="neutral"
			class="justify-start! h-auto! py-4! px-4!"
			:ui="{
				base: 'group',
				rounded: 'rounded-xl'
			}"
		>
			<template #leading>
				<UIcon
					name="i-lucide-arrow-left"
					class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 transition-colors flex-shrink-0"
				/>
			</template>
			<div class="flex-1 min-w-0 text-left">
				<span class="text-xs text-neutral-500 uppercase tracking-wide block font-normal">
					{{ previousLabel }}
				</span>
				<p class="font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-1 mt-0.5">
					{{ previous.title }}
				</p>
			</div>
		</UButton>
		<div v-else />

		<!-- Next -->
		<UButton
			v-if="next"
			:to="getPostUrl(next)"
			variant="ghost"
			color="neutral"
			class="justify-end! h-auto! py-4! px-4!"
			:ui="{
				base: 'group',
				rounded: 'rounded-xl'
			}"
		>
			<div class="flex-1 min-w-0 text-right">
				<span class="text-xs text-neutral-500 uppercase tracking-wide block font-normal">
					{{ nextLabel }}
				</span>
				<p class="font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-1 mt-0.5">
					{{ next.title }}
				</p>
			</div>
			<template #trailing>
				<UIcon
					name="i-lucide-arrow-right"
					class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 transition-colors flex-shrink-0"
				/>
			</template>
		</UButton>
	</nav>
</template>

<script setup>
const props = defineProps({
	/** Previous post object */
	previous: {
		type: Object,
		default: null,
		// { title, slug } or { title, _path }
	},
	/** Next post object */
	next: {
		type: Object,
		default: null,
		// { title, slug } or { title, _path }
	},
	/** Base path for blog posts */
	basePath: {
		type: String,
		default: '/blog',
	},
	/** Label for previous link */
	previousLabel: {
		type: String,
		default: 'Previous',
	},
	/** Label for next link */
	nextLabel: {
		type: String,
		default: 'Next',
	},
});

const getPostUrl = (post) => {
	// Support both slug and _path (from Nuxt Content)
	if (post._path) {
		return post._path;
	}
	return `${props.basePath}/${post.slug}`;
};
</script>
