import React, { CSSProperties } from 'react';
export interface ControlsProps {
    onPlay: () => void;
    onPause: () => void;
    onFullscreen: () => void;
    isFullscreen: boolean;
    style?: CSSProperties;
}

export const Controls = (props: ControlsProps) => {
    return (
        <div style={props.style}>
            <h1 style={{ color: 'red' }} onClick={props.onPlay}>
                play
            </h1>
            <h1 style={{ color: 'red' }} onClick={props.onPause}>
                pause
            </h1>
            <h1 style={{ color: 'red' }} onClick={props.onFullscreen}>
                {props.isFullscreen ? 'exit fullscreen' : 'fullscreen'}
            </h1>
        </div>
    );
};
