"use client"

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

import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"

import { variants } from "./variants"

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

import type { VariantProps } from "class-variance-authority"
import type { ComponentProps } from "react"

interface BackToTopButtonProps
  extends ComponentProps<typeof ButtonRAC>, VariantProps<typeof variants> {
  label: string
}

export function BackToTopButton({
  position,
  label,
  ...props
}: BackToTopButtonProps) {
  const classNames = variants({ position })

  return (
    <Typography variant="Body/Supporting text (caption)/smBold">
      <ButtonRAC className={classNames} aria-label={label} {...props}>
        <MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
        <span className={styles.text}>{label}</span>
      </ButtonRAC>
    </Typography>
  )
}