import React from 'react'
import { usePlayerContext } from '../../contexts/PlayerContext'
import { FullscreenIcon, FullscreenExitIcon } from '../../icons'
import './ControlButton.css'

export const FullscreenButton: React.FC = () => {
  const { videoState, toggleFullscreen } = usePlayerContext()

  return (
    <button
      className="control-button fullscreen-button"
      onClick={toggleFullscreen}
      aria-label={videoState.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
      title={videoState.fullscreen ? 'Exit fullscreen (F)' : 'Enter fullscreen (F)'}
    >
      {videoState.fullscreen ? (
        <FullscreenExitIcon size={24} color="var(--player-text)" />
      ) : (
        <FullscreenIcon size={24} color="var(--player-text)" />
      )}
    </button>
  )
}