import React from 'react';
import { ButtonProps } from '../utils/types';
import {
  TileButton,
  TileWhiteButton,
  TileButtonSuccess,
  MagnifierImg,
  CheckImg,
} from './style';

const ButtonKDS = ({
  text,
  type = '',
  isIcon = false,
  setIsZoomIn,
  callOrderApi,
  isZoomIn,
  small,
}: ButtonProps): JSX.Element => {
  return type === 'white' ? (
    <TileWhiteButton small={small} onClick={() => setIsZoomIn(!isZoomIn)}>
      {isIcon && <MagnifierImg data-testid="magnifier-icon" />}
      {text}
    </TileWhiteButton>
  ) : type === 'large' ? (
    <TileButtonSuccess small={small} onClick={callOrderApi}>
      {isIcon && <CheckImg />}
      {text}
    </TileButtonSuccess>
  ) : (
    <TileButton small={small} onClick={callOrderApi}>
      {isIcon && <CheckImg />}
      {text}
    </TileButton>
  );
};

export default ButtonKDS;