import React from 'react';

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

const ControlBar: React.FC<Props> = React.memo((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>
        <button style={buttonStyles} onClick={props.onClip}>
          Clip
        </button>
        <button style={buttonStyles} onClick={props.onZoomIn}>
          Zoom In
        </button>
        <button style={buttonStyles} onClick={props.onZoomOut}>
          Zoom Out
        </button>
      </div>
    </>
  );
});

ControlBar.displayName = 'ControlBar';
export { ControlBar };