web/packages/design-system/lib/components/BackToTopButton/index.tsx

'use client'

import { type Button, Button as ButtonRAC } from 'react-aria-components'

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

import { backToTopButtonVariants } 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 Button>,
    VariantProps<typeof backToTopButtonVariants> {
  label: string
}

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