import React from 'react';

import Icon from '../Icon';

import { ToggleButton } from './styled';

type Props = {
  displayMode: string;
  toggleDisplayMode: (state: string) => void;
};

const FullScreenButton: React.FC<Props> = ({
  displayMode,
  toggleDisplayMode,
}: Props) => {
  return (
    <ToggleButton>
      {displayMode === 'normal' ? (
        <Icon
          glyph="tool-close"
          onClick={(): void => {
            toggleDisplayMode('full');
          }}
        />
      ) : (
        <Icon
          glyph="tool-open"
          onClick={(): void => {
            toggleDisplayMode('normal');
          }}
        />
      )}
    </ToggleButton>
  );
};

export default FullScreenButton;