"use client"

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

import { ArrowUpIcon } from "@/components/Icons"

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}
    >
      <ArrowUpIcon color="burgundy" />
      <span className={styles.backToTopButtonText}>
        {intl.formatMessage({ id: "Back to top" })}
      </span>
    </ButtonRAC>
  )
}