web/apps/scandic-web/components/MyPages/Surprises/Navigation.tsx

import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

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="Text"
        isDisabled={selectedSurprise === 0}
        onPress={() => showSurprise(-1)}
        size="Small"
        typography="Body/Supporting text (caption)/smBold"
      >
        <MaterialIcon
          icon="chevron_right"
          color="CurrentColor"
          size={20}
          className={styles.chevron}
        />
        {intl.formatMessage({
          id: "common.previous",
          defaultMessage: "Previous",
        })}
      </Button>
      <Button
        variant="Text"
        isDisabled={selectedSurprise === totalSurprises - 1}
        onPress={() => showSurprise(1)}
        size="Small"
        typography="Body/Supporting text (caption)/smBold"
      >
        {intl.formatMessage({
          id: "common.next",
          defaultMessage: "Next",
        })}
        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
    </nav>
  )
}