import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/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"
      >
        <MaterialIcon
          icon="chevron_right"
          color="CurrentColor"
          size={20}
          className={styles.chevron}
        />
        {intl.formatMessage({ id: "Previous" })}
      </Button>
      <Button
        variant="icon"
        intent="tertiary"
        disabled={selectedSurprise === totalSurprises - 1}
        onPress={() => showSurprise(1)}
        size="small"
      >
        {intl.formatMessage({ id: "Next" })}
        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
    </nav>
  )
}
