"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 { Typography } from "@scandic-hotels/design-system/Typography"

import { backToTopButtonVariants } from "./variants"

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

import type { BackToTopButtonProps } from "./backToTopButton"

export function BackToTopButton({ position, ...props }: BackToTopButtonProps) {
  const intl = useIntl()
  return (
    <Typography variant="Body/Supporting text (caption)/smBold">
      <ButtonRAC
        className={backToTopButtonVariants({ position })}
        aria-label={intl.formatMessage({
          defaultMessage: "Back to top",
        })}
        {...props}
      >
        <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
        <span className={styles.text}>
          {intl.formatMessage({
            defaultMessage: "Back to top",
          })}
        </span>
      </ButtonRAC>
    </Typography>
  )
}