import {FunctionComponent} from 'react'
import {Button, ButtonProps} from '@/components/ui/button'
import {Loader2} from 'lucide-react'
import {cn} from '@/lib/utils'

interface SubmitButtonWithLoadingProps {
  loading: boolean
  text: string
  loadingText: string
  variant?: ButtonProps['variant']
  className?: ButtonProps['className']
  disabled?: boolean
}

const SubmitButtonWithLoading: FunctionComponent<SubmitButtonWithLoadingProps> = ({
  loading,
  text,
  loadingText,
  variant,
  className,
  disabled,
}) => {
  const forcefullyDisabled = disabled ?? false
  return (
    <Button
      disabled={forcefullyDisabled || loading}
      type="submit"
      className={cn('w-full', className)}
      variant={variant}>
      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
      {loading ? loadingText : text}
    </Button>
  )
}

export default SubmitButtonWithLoading
