import styles from "./styles.module.scss"
import { Arrow } from '@/components/Arrow/Arrow'
import Link from 'next/link'
import classNames from 'classnames'

type NextPrevButtonsProps = {
  next?: {
    text: string,
    href: string
  }
  prev?: {
    text: string,
    href: string
  }
}

export const NextPrevButtons = (
  {
    next,
    prev
  }: NextPrevButtonsProps) => {
  return (
    <div className={classNames({
      [styles.container]: true,
      [styles.noPrev]: typeof prev === 'undefined'
    })}>
      {prev &&
        <Link href={prev.href} className={styles.arrow}>
          <Arrow direction={"left"} />
          {prev.text}
        </Link>
      }
      {next &&
          <Link href={next.href} className={classNames(styles.arrow, styles.arrowRight)}>
            {next.text}
            <Arrow direction={"right"} />
          </Link>
      }
    </div>
  )
}