---
import Link from '@components/Link.astro'
import { ArrowLeft, ArrowRight } from 'lucide-react'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'

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

<div class="mt-8 flex justify-between gap-4">
  <Link
    href={prevPost ? `/blog/${prevPost.slug}` : '#'}
    class={cn(
      buttonVariants({ variant: 'outline' }),
      'group flex items-center justify-start gap-2 w-1/2',
      !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
    )}
    aria-disabled={!prevPost}
  >
    <ArrowLeft
      className="h-4 w-4 transition-transform group-hover:-translate-x-1"
    />
    <span class="truncate">{prevPost?.data.title || 'Latest post!'}</span>
  </Link>
  <Link
    href={nextPost ? `/blog/${nextPost.slug}` : '#'}
    class={cn(
      buttonVariants({ variant: 'outline' }),
      'group flex items-center justify-end gap-2 w-1/2',
      !nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
    )}
    aria-disabled={!nextPost}
  >
    <span class="truncate">{nextPost?.data.title || 'Last post!'}</span>
    <ArrowRight
      className="h-4 w-4 transition-transform group-hover:translate-x-1"
    />
  </Link>
</div>