import React from 'react';
import { useTheme } from 'styled-components';
import { ITheme } from '../../types/theme.interface';
import { IPropsButton } from './Button.interface';
import { ButtonStyle } from './Button.style';

export const Button: React.FunctionComponent<IPropsButton> = ({
   ref,
   onClick,
   rounded,
   outline,
   bgColor,
   w100 = false,
   type = 'button',
   size = 'medium',
   variant = 'primary',
   children,
   ...rest
}) => {
   const theme: ITheme = useTheme();
   const { button = {} } = theme ?? {};
   const { defaultColor, rounded: roundedTheme, outline: outlineTheme } = button;

   return (
      <ButtonStyle
         ref={ref}
         type={type}
         className="btn"
         variant={variant}
         defaultColor={defaultColor}
         background={bgColor}
         w100={w100}
         outline={outline == undefined ? outlineTheme : outline}
         rounded={rounded == undefined ? roundedTheme : rounded}
         onClick={onClick}
         {...rest}
      >
         {children}
      </ButtonStyle>
   );
};
