---
import ChevronRightIcon from '../icons/lucide-chevron-right.svg'
import ChevronLeftIcon from '../icons/lucide-chevron-left.svg'

interface Props {
  label: string
  href: string
  rel: 'next' | 'prev'
  side: 'left' | 'right'
}

const { label, href, rel, side } = Astro.props
---

<a
  href={href}
  rel={rel}
  data-side={side}
  class="group m-0 flex items-center justify-end gap-2 rounded-xl p-2 font-medium text-(--sl-color-gray-2) no-underline transition hover:text-(--sl-color-white) md:text-lg [[rel='next']]:flex-row [[rel='prev']]:flex-row-reverse"
>
  <span>{label}</span>

  {
    side === 'right' ? (
      <ChevronRightIcon class="block min-h-5 min-w-5 transition group-hover:translate-x-1" />
    ) : (
      <ChevronLeftIcon class="block min-h-5 min-w-5 transition group-hover:-translate-x-1" />
    )
  }
</a>