import React from 'react';
import { ExpandDropdownIcon } from '../../icons';
import { ButtonProps } from '../../interfaces';
import Spinner from '../Spinner';
import { StyledButton, TitleWrapper, ExpandIconWrapper } from './styles';

const Button = (props: ButtonProps) => (
  <StyledButton
    {...props}
    data-cy={props.dataCy}
    data-testid={props.dataTestId}
    onClick={props.onClick}
  >
    {props.isLoading ? (
      <Spinner />
    ) : (
      <>
        {props.icon && props.icon}
        {props.title && !props.iconButton && (
          <TitleWrapper togglesExpand={props.togglesExpand}>
            {props.title}
          </TitleWrapper>
        )}
        {props.togglesExpand && (
          <ExpandIconWrapper>
            <ExpandDropdownIcon
              width={18}
              height={18}
              arrowPointsUp={props.toggleArrowPointsUp}
              color="currentColor"
            />
          </ExpandIconWrapper>
        )}
      </>
    )}
  </StyledButton>
);

export default Button;