import React from 'react'
import { usePlayerContext } from '../../contexts/PlayerContext'
import { PIPIcon } from '../../icons'
import './ControlButton.css'

export const PIPButton: React.FC = () => {
  const { videoState, togglePictureInPicture } = usePlayerContext()

  // Check if PIP is supported
  const isPIPSupported = 'pictureInPictureEnabled' in document

  if (!isPIPSupported) {
    return null
  }

  return (
    <button
      className="control-button pip-button"
      onClick={togglePictureInPicture}
      aria-label={videoState.pictureInPicture ? 'Exit picture-in-picture' : 'Enter picture-in-picture'}
      title="Picture-in-picture (P)"
    >
      <PIPIcon size={24} color="var(--player-text)" />
    </button>
  )
}