import BaseButton, { ButtonProps as BaseButtonProps } from '@mui/material/Button'
import { ElementType } from 'react'

import { CircularProgress } from '@mui/material'
import { IBaseProps } from '@/@core/types/base-props.interface'
import { ITranslationProps } from '@/@core/types/translation.interface'
import Translation from '../translation'

export type ButtonProps<Component extends ElementType = 'button'> = BaseButtonProps<
  Component,
  IBaseProps<Component> & ITranslationProps & { isLoading?: boolean }
>

const Button = <Component extends ElementType = 'button'>(props: ButtonProps<Component>) => {
  const { isLoading = false, withoutTranslation = false, ...rest } = props
  return (
    <BaseButton fullWidth {...rest}>
      {isLoading ? (
        <>
          <CircularProgress size={18} color='inherit' className='me-1' />{' '}
          {!props?.withoutTranslation && typeof props.children === 'string' ? (
            <Translation text={props.children} {...props.options} />
          ) : (
            props.children
          )}
        </>
      ) : !props?.withoutTranslation && typeof props.children === 'string' ? (
        <Translation text={props.children} {...props.options} />
      ) : (
        props.children
      )}
    </BaseButton>
  )
}

export default Button