'use client'

import { Button as ButtonRAC } from 'react-aria-components'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import styles from './button.module.css'

interface VideoPlayerButtonProps {
  onPress: () => void
  iconName: 'play_arrow' | 'pause' | 'volume_up' | 'volume_off'
  ariaLabel: string
  className?: string
}

export function VideoPlayerButton({
  onPress,
  ariaLabel,
  iconName,
  className,
}: VideoPlayerButtonProps) {
  return (
    <div className={className}>
      <ButtonRAC
        className={styles.videoPlayerButton}
        onPress={onPress}
        aria-label={ariaLabel}
      >
        <span className={styles.transparentBackground} />
        <span className={styles.iconWrapper}>
          <MaterialIcon
            icon={iconName}
            size={32}
            color="CurrentColor"
            isFilled
          />
        </span>
      </ButtonRAC>
    </div>
  )
}