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

const { newerPost, olderPost, parentPost, baseURL } = Astro.props
const isSubpost = !!parentPost
---

<nav
  class={cn(
    'col-start-2 grid grid-cols-1 gap-4',
    isSubpost ? 'sm:grid-cols-3' : 'sm:grid-cols-2',
  )}
>
  <Link
    href={olderPost ? `${baseURL}${olderPost.id}#post-title` : '#'}
    class={cn(
      buttonVariants({ variant: 'outline' }),
      'rounded-lg group flex items-center justify-start size-full',
      !olderPost &&
        'pointer-events-none opacity-0 invisible cursor-not-allowed',
    )}
    aria-disabled={!olderPost}
  >
    <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 text-wrap">
      <span class="text-muted-foreground text-left text-xs">
        {isSubpost ? 'Previous Subpost' : 'Previous Post'}
      </span>
      <span class="w-full text-left text-sm text-balance text-ellipsis">
        {
          olderPost?.data.title ||
            (isSubpost ? 'No older subpost' : "You're at the oldest post!")
        }
      </span>
    </div>
  </Link>

  {
    isSubpost && (
      <Link
        href={parentPost ? `${baseURL}${parentPost.id}#post-title` : '#'}
        class={cn(
          buttonVariants({ variant: 'outline' }),
          'group flex size-full items-center justify-center rounded-lg',
          !parentPost && 'pointer-events-none cursor-not-allowed opacity-50',
        )}
      >
        <Icon
          name="lucide:corner-left-up"
          class="mr-2 size-4 transition-transform group-hover:-translate-y-1"
        />
        <div class="flex flex-col items-center overflow-hidden text-wrap">
          <span class="text-muted-foreground text-center text-xs">
            Parent Post
          </span>
          <span class="w-full text-center text-sm text-balance text-ellipsis">
            {parentPost?.data.title || 'No parent post'}
          </span>
        </div>
      </Link>
    )
  }

  <Link
    href={newerPost ? `${baseURL}${newerPost.id}#post-title` : '#'}
    class={cn(
      buttonVariants({ variant: 'outline' }),
      'rounded-lg group flex items-center justify-end size-full',
      !newerPost &&
        'pointer-events-none opacity-0 invisible cursor-not-allowed',
    )}
    aria-disabled={!newerPost}
  >
    <div class="flex flex-col items-end overflow-hidden text-wrap">
      <span class="text-muted-foreground text-right text-xs">
        {isSubpost ? 'Next Subpost' : 'Next Post'}
      </span>
      <span class="w-full text-right text-sm text-balance text-ellipsis">
        {
          newerPost?.data.title ||
            (isSubpost ? 'No newer subpost' : "You're at the newest post!")
        }
      </span>
    </div>
    <Icon
      name="lucide:arrow-right"
      class="ml-2 size-4 transition-transform group-hover:translate-x-1"
    />
  </Link>
</nav>