import React from 'react'
import { FaSpinner } from 'react-icons/fa'
import { ReactNode } from 'react'

import './SubmitButton.css'

type SubmitButtonVariant = 'text' | 'full'

type Props = {
  onClick?: () => void
  startIcon?: ReactNode
  label?: string
  disabled?: boolean
  isLoading?: boolean
  variant?: SubmitButtonVariant
}

export const SubmitButton = ({
  onClick,
  startIcon,
  label,
  disabled,
  isLoading,
  variant,
}: Props) => {
  return (
    <button
      className={`will-filter-bar-submit-button ${variant || 'default'}`}
      onClick={onClick}
      disabled={disabled || isLoading}
    >
      {isLoading ? (
        <span>
          {<FaSpinner style={{ animation: 'spin 1s linear infinite' }} />}
        </span>
      ) : (
        startIcon && <span>{startIcon}</span>
      )}
      {label || 'Label'}
    </button>
  )
}