web/packages/design-system/lib/components/VideoPlayer/Button/index.tsx

'use client'

import { Button as ButtonRAC } from 'react-aria-components'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { VideoPlayerButtonProps } from './types'
import { variants } from './variants'
import styles from './videoPlayerButton.module.css'

export function VideoPlayerButton({
  iconName,
  size,
  className,
  ...props
}: VideoPlayerButtonProps) {
  const classNames = variants({
    size,
    className,
  })

  return (
    <ButtonRAC className={classNames} {...props}>
      <span className={styles.transparentBackground} />
      <span className={styles.iconWrapper}>
        <MaterialIcon
          icon={iconName}
          size={getIconSize(size)}
          color="CurrentColor"
          isFilled
        />
      </span>
    </ButtonRAC>
  )
}

function getIconSize(size: VideoPlayerButtonProps['size']) {
  switch (size) {
    case 'sm':
      return 28
    case 'lg':
      return 40
    case 'md':
    default:
      return 32
  }
}