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

"use client"

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

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, ...props }: CarouselButtonProps) {
  const { scrollPrev, canScrollPrev } = useCarousel()

  const intl = useIntl()

  if (!canScrollPrev()) return null

  return (
    <button
      className={cx(styles.button, styles.buttonPrev, className)}
      onClick={scrollPrev}
      aria-label={intl.formatMessage({ id: "Previous slide" })}
      {...props}
    >
      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
    </button>
  )
}

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

  const intl = useIntl()

  if (!canScrollNext()) return null

  return (
    <button
      className={cx(styles.button, styles.buttonNext, className)}
      onClick={scrollNext}
      aria-label={intl.formatMessage({ id: "Next slide" })}
      {...props}
    >
      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
    </button>
  )
}