import { useIntl } from "react-intl"

import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"

import styles from "./surprises.module.css"

import type { NavigationProps } from "@/types/components/blocks/surprises"

export default function Navigation({
  selectedSurprise,
  totalSurprises,
  showSurprise,
}: NavigationProps) {
  const intl = useIntl()

  return (
    <nav className={styles.nav}>
      <Button
        variant="icon"
        intent="tertiary"
        disabled={selectedSurprise === 0}
        onPress={() => showSurprise(-1)}
        size="small"
      >
        <ChevronRightSmallIcon
          className={styles.chevron}
          width={20}
          height={20}
        />
        {intl.formatMessage({ id: "Previous" })}
      </Button>
      <Button
        variant="icon"
        intent="tertiary"
        disabled={selectedSurprise === totalSurprises - 1}
        onPress={() => showSurprise(1)}
        size="small"
      >
        {intl.formatMessage({ id: "Next" })}
        <ChevronRightSmallIcon width={20} height={20} />
      </Button>
    </nav>
  )
}