---
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-[var(--theme-border-primary)]" aria-label="Post navigation">
		<div class="flex items-center gap-4 mb-8">
			<span class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest font-bold">
				/// NEXT_IN_SEQUENCE
			</span>
			<span class="h-px flex-grow bg-[var(--theme-border-primary)]"></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-[var(--theme-border-primary)] bg-[var(--theme-hover-bg)] hover:border-brand-accent/40 hover:bg-[var(--theme-hover-bg-strong)] transition-all duration-500 overflow-hidden"
				>
					<div class="absolute top-0 left-0 w-[2px] h-full bg-[var(--theme-text-subtle)] opacity-50 group-hover:bg-brand-accent group-hover:opacity-100 transition-all duration-500"></div>
					<div class="absolute inset-0 bg-brand-accent/5 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-500 pointer-events-none"></div>

					<!-- Content -->
					<div class="flex-grow min-w-0 z-10">
						<span class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 block group-hover:text-brand-accent transition-colors">
							&lt; PREV_FILE
						</span>
						<h4 class="text-sm font-bold text-[var(--theme-text-primary)] 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-12 h-12 overflow-hidden border border-[var(--theme-border-primary)] z-10 grayscale group-hover:grayscale-0 transition-all duration-500">
							<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 class="border border-[var(--theme-border-secondary)] bg-[var(--theme-hover-bg)] p-6 flex items-center justify-center">
                    <span class="text-[10px] font-mono text-[var(--theme-text-subtle)] uppercase tracking-widest">/// START_OF_ARCHIVE</span>
                </div>
			)}
			
			<!-- Next Post -->
			{nextPost ? (
				<a
					href={nextPost.href}
					class="group relative flex items-center gap-6 p-6 border border-[var(--theme-border-primary)] bg-[var(--theme-hover-bg)] hover:border-brand-accent/40 hover:bg-[var(--theme-hover-bg-strong)] transition-all duration-500 overflow-hidden"
				>
					<div class="absolute top-0 right-0 w-[2px] h-full bg-[var(--theme-text-subtle)] opacity-50 group-hover:bg-brand-accent group-hover:opacity-100 transition-all duration-500"></div>
					<div class="absolute inset-0 bg-brand-accent/5 translate-x-[100%] group-hover:translate-x-0 transition-transform duration-500 pointer-events-none"></div>
					
					<!-- Thumbnail -->
					{nextPost.heroImage && (
						<div class="hidden sm:block flex-shrink-0 w-12 h-12 overflow-hidden border border-[var(--theme-border-primary)] z-10 grayscale group-hover:grayscale-0 transition-all duration-500">
							<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 z-10">
						<span class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest mb-2 block group-hover:text-brand-accent transition-colors">
							NEXT_FILE &gt;
						</span>
						<h4 class="text-sm font-bold text-[var(--theme-text-primary)] uppercase tracking-tight truncate group-hover:text-brand-accent transition-colors">
							{nextPost.title}
						</h4>
					</div>
				</a>
			) : (
				<div class="border border-[var(--theme-border-secondary)] bg-[var(--theme-hover-bg)] p-6 flex items-center justify-center">
                    <span class="text-[10px] font-mono text-[var(--theme-text-subtle)] uppercase tracking-widest">/// END_OF_ARCHIVE</span>
                </div>
			)}
		</div>
	</nav>
)}
