---
import Link from "@/components/Link.astro";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Icon } from "astro-icon/components";

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

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