Untitled

import { ReactNode } from 'react'
import { useTheme } from '@mui/material'

import { ButtonContainer, ButtonStyled, ErrorText, Loading, Progress } from './styled'
import { BasicButtonProps, ButtonSizes, ButtonVariants } from './models'
import { getSizeStyles, getVariantStyles } from './utils'

type BaseButtonProps = BasicButtonProps & {
  children: ReactNode
  onClick?: () => void
}

export const Button = ({
  size = ButtonSizes.Large,
  variant = ButtonVariants.Primary,
  isDisabled = false,
  isLoading = false,
  error = '',
  progress = 0,
  onClick, 
  children,
}: BaseButtonProps) => {
  const theme = useTheme()

  const sizeStyles = getSizeStyles(size, theme)
  const variantStyles = getVariantStyles(variant, isLoading, isDisabled, progress, error, theme)

  return (
    <ButtonContainer onClick={!isDisabled ? onClick : undefined}>
      <ButtonStyled
        isDisabled={isDisabled}
        isLoading={isLoading}
        sx={{
          ...sizeStyles,
          ...variantStyles,
        }}
      >
        {isLoading && (
          <Loading
            className="loading"
            initial={{ left: '0' }}
            animate={{ left: '-35%' }}
            transition={{
              duration: 1,
              repeat: Infinity,
              ease: 'linear',
            }}
          />
        )}
        {progress > 0 && (
          <Progress
            className="progress"
            initial={{ width: '0%' }}
            animate={{ width: `${progress}%` }}
            transition={{
              duration: 0.5,
              ease: 'easeInOut',
            }}
          />
        )}
        {children}
      </ButtonStyled>

      <ErrorText>{error}</ErrorText>
    </ButtonContainer>
  )
}