---
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';

interface NavPost {
	title: string;
	href: string;
	heroImage?: ImageMetadata;
}

interface Props {
	prevPost?: NavPost;
	nextPost?: NavPost;
}

const { prevPost, nextPost } = Astro.props;
---

{(prevPost || nextPost) && (
	<nav class="post-navigation mt-20 pt-12 border-t border-white/10" aria-label="Post navigation">
		<div class="flex items-center gap-4 mb-8">
			<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-bold">
				/// CONTINUE READING
			</span>
			<span class="h-px flex-grow bg-white/10"></span>
		</div>
		
		<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
			<!-- Previous Post -->
			{prevPost ? (
				<a
					href={prevPost.href}
					class="group relative flex items-center gap-6 p-6 border border-white/10 bg-white/[0.02] hover:border-brand-accent/40 hover:bg-white/[0.04] transition-all duration-500"
				>
					<div class="absolute top-0 left-0 w-1 h-full bg-slate-700 opacity-50 group-hover:bg-brand-accent group-hover:opacity-100 transition-all duration-500"></div>
					
					<!-- Arrow -->
					<div class="flex-shrink-0 w-10 h-10 flex items-center justify-center border border-white/10 group-hover:border-brand-accent/50 transition-colors">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="16"
							height="16"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="text-slate-500 group-hover:text-brand-accent transition-colors group-hover:-translate-x-1 transition-transform duration-300"
						>
							<path d="M19 12H5" />
							<path d="m12 19-7-7 7-7" />
						</svg>
					</div>
					
					<!-- Content -->
					<div class="flex-grow min-w-0">
						<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2 block">
							Previous
						</span>
						<h4 class="text-sm font-bold text-white uppercase tracking-tight truncate group-hover:text-brand-accent transition-colors">
							{prevPost.title}
						</h4>
					</div>
					
					<!-- Thumbnail -->
					{prevPost.heroImage && (
						<div class="hidden sm:block flex-shrink-0 w-16 h-16 overflow-hidden border border-white/10">
							<Image
								src={prevPost.heroImage}
								alt=""
								width={64}
								height={64}
								class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
							/>
						</div>
					)}
				</a>
			) : (
				<div></div>
			)}
			
			<!-- Next Post -->
			{nextPost ? (
				<a
					href={nextPost.href}
					class="group relative flex items-center gap-6 p-6 border border-white/10 bg-white/[0.02] hover:border-brand-accent/40 hover:bg-white/[0.04] transition-all duration-500"
				>
					<div class="absolute top-0 right-0 w-1 h-full bg-slate-700 opacity-50 group-hover:bg-brand-accent group-hover:opacity-100 transition-all duration-500"></div>
					
					<!-- Thumbnail -->
					{nextPost.heroImage && (
						<div class="hidden sm:block flex-shrink-0 w-16 h-16 overflow-hidden border border-white/10">
							<Image
								src={nextPost.heroImage}
								alt=""
								width={64}
								height={64}
								class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
							/>
						</div>
					)}
					
					<!-- Content -->
					<div class="flex-grow min-w-0 text-right">
						<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2 block">
							Next
						</span>
						<h4 class="text-sm font-bold text-white uppercase tracking-tight truncate group-hover:text-brand-accent transition-colors">
							{nextPost.title}
						</h4>
					</div>
					
					<!-- Arrow -->
					<div class="flex-shrink-0 w-10 h-10 flex items-center justify-center border border-white/10 group-hover:border-brand-accent/50 transition-colors">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="16"
							height="16"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="text-slate-500 group-hover:text-brand-accent transition-colors group-hover:translate-x-1 transition-transform duration-300"
						>
							<path d="M5 12h14" />
							<path d="m12 5 7 7-7 7" />
						</svg>
					</div>
				</a>
			) : (
				<div></div>
			)}
		</div>
	</nav>
)}

