import { FC } from 'react';

import IconButton from '@material-hu/mui/IconButton';

export type NavigationButtonProps = {
  NavigationIcon: any;
  onClick: () => void;
  isNext?: boolean;
};

export const NavigationButton: FC<NavigationButtonProps> = props => {
  const { NavigationIcon, onClick, isNext = false } = props;

  return (
    <IconButton
      onClick={onClick}
      sx={{
        height: '40px',
        width: '40px',
        borderRadius: '20px',
        backgroundColor: '#000000bf',
        position: 'fixed',
        top: '50%',
        bottom: '50%',
        left: isNext ? 'auto' : '12px !important',
        right: isNext ? '12px !important' : 'auto',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        '&:hover': {
          backgroundColor: '#4d90fe',
        },
      }}
    >
      <NavigationIcon
        fontSize="medium"
        sx={{ color: '#ffffff' }}
      />
    </IconButton>
  );
};

export default NavigationButton;