"use client"

import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"

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

import { backToTopButtonVariants } from "./variants"

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

export function BackToTopButton({
  onClick,
  position,
}: {
  onClick: () => void
  position: "left" | "right" | "center"
}) {
  const intl = useIntl()
  return (
    <ButtonRAC
      className={backToTopButtonVariants({ position })}
      onPress={onClick}
    >
      <MaterialIcon icon="arrow_upward" color="CurrentColor" />
      <span className={styles.backToTopButtonText}>
        {intl.formatMessage({
          defaultMessage: "Back to top",
        })}
      </span>
    </ButtonRAC>
  )
}