web/apps/scandic-web/components/Carousel/CarouselNavigation.tsx

"use client"

import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

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

import { useCarousel } from "./CarouselContext"

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

import type { CarouselButtonProps } from "./types"

export function CarouselPrevious({ className }: CarouselButtonProps) {
  const { scrollPrev, canScrollPrev } = useCarousel()

  const intl = useIntl()

  if (!canScrollPrev()) return null

  return (
    <span className={cx(styles.buttonWrapper, styles.previous, className)}>
      <IconButton
        theme="Inverted"
        style="Elevated"
        onPress={scrollPrev}
        aria-label={intl.formatMessage({
          id: "carousel.previousSlide",
          defaultMessage: "Previous slide",
        })}
      >
        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
      </IconButton>
    </span>
  )
}

export function CarouselNext({ className }: CarouselButtonProps) {
  const { scrollNext, canScrollNext } = useCarousel()

  const intl = useIntl()

  if (!canScrollNext()) return null

  return (
    <span className={cx(styles.buttonWrapper, styles.next, className)}>
      <IconButton
        theme="Inverted"
        style="Elevated"
        onPress={scrollNext}
        aria-label={intl.formatMessage({
          id: "carousel.nextSlide",
          defaultMessage: "Next slide",
        })}
      >
        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
      </IconButton>
    </span>
  )
}