---
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/lib/button-variants'
import { cn } from '@/lib/utils'
import { Icon } from 'astro-icon/components'

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

<nav class="grid grid-cols-1 gap-4 sm:grid-cols-2">
  <Link
    href={prevPost ? `/blog/${prevPost.id}` : '#'}
    class={cn(
      buttonVariants({ variant: 'outline' }),
      'rounded-xl group flex items-center justify-start size-full',
      !prevPost && 'pointer-events-none opacity-50 cursor-not-allowed'
    )}
    aria-disabled={!prevPost}
  >
    <Icon
      name="lucide:arrow-left"
      class="mr-2 size-4 transition-transform group-hover:-translate-x-1"
    />
    <div class="flex flex-col items-start overflow-hidden min-w-0 flex-1">
      <span class="text-muted-foreground text-left text-xs">Previous Post</span>
      <span class="w-full text-left text-sm overflow-hidden text-ellipsis whitespace-nowrap">
        {prevPost?.data.title || 'No previous post!'}
      </span>
    </div>
  </Link>
  <Link
    href={nextPost ? `/blog/${nextPost.id}` : '#'}
    class={cn(
      buttonVariants({ variant: 'outline' }),
      'rounded-xl group flex items-center justify-end size-full',
      !nextPost && 'pointer-events-none opacity-50 cursor-not-allowed'
    )}
    aria-disabled={!nextPost}
  >
    <div class="flex flex-col items-end overflow-hidden min-w-0 flex-1">
      <span class="text-muted-foreground text-right text-xs">Next Post</span>
      <span class="w-full text-right text-sm overflow-hidden text-ellipsis whitespace-nowrap">
        {nextPost?.data.title || 'No next post!'}
      </span>
    </div>
    <Icon
      name="lucide:arrow-right"
      class="ml-2 size-4 transition-transform group-hover:translate-x-1"
    />
  </Link>
</nav>
