/** @jsxRuntime classic */
/** @jsx jsx */
import React, { FC, useEffect, useState, Fragment } from 'react';
import { IColors, TSize, TButton } from '../../types/theme';
import { ThemeColors } from '../../styles/theme';
import cx from 'classnames';
import { Loader } from '../Loader';
import { jsx, useTheme } from '@emotion/react';
import { StyledButton } from './style';

export interface ButtonProps {
  theme: TButton;
  sizer: TSize;
  icon?: string;
  isProcessing?: boolean;
  // colors?: IColors;
}

export const Button: FC<
  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
> = ({
  children,
  theme = 'primary',
  sizer = 'L',
  isProcessing = false,
  icon = '',
  // colors = ThemeColors,
  ...rest
}) => {
  const colors = useTheme();
  const newClassName = rest.className;
  delete rest.className;

  return (
    <StyledButton
      theme={{ ...colors }}
      {...rest}
      className={cx(
        {
          primary: theme === 'primary',
          secondary: theme === 'secondary',
          invert: theme === 'invert',
          basic: theme === 'basic',
        },
        sizer,
        newClassName
      )}
    >
      {isProcessing ? <Loader /> : children}
    </StyledButton>
  );
};