interface Props {
  onPlay: () => void;
  onPause: () => void;
}

export const ControlBar: React.FC<Props> = (props: Props) => {
  const styles = { width: '100%', flexGrow: 0 };
  const buttonStyles = {
    cursor: 'pointer',
    background: 'black',
    outline: 'none',
    border: 'none',
    color: 'green',
    display: 'inline-block',
    margin: '0 2px',
  };

  return (
    <>
      <div style={styles}>
        <button style={buttonStyles} onClick={props.onPlay}>
          Play
        </button>
        <button style={buttonStyles} onClick={props.onPause}>
          Pause
        </button>
      </div>
    </>
  );
};