"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
  }
}