'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>
  )
}