import { Check, Loader2 } from "lucide-react"

import { Button } from "@/components/ui/button"

interface SubmitButtonProps {
  isSubmitting: boolean
  isSubmitSuccessful: boolean
  isSubmitError?: boolean
  disabled?: boolean
  children?: React.ReactNode
}

export function SubmitButton({
  isSubmitting,
  isSubmitSuccessful,
  disabled,
  children = "Submit",
  ...props
}: SubmitButtonProps) {
  return (
    <Button
      type="submit"
      className="flex w-full items-center justify-center gap-2"
      disabled={disabled || isSubmitting || isSubmitSuccessful}
      {...props}
    >
      {!isSubmitting && !isSubmitSuccessful && children}
      {isSubmitting && (
        <>
          Processing
          <Loader2 className="animate-spin" />
        </>
      )}
      {isSubmitSuccessful && (
        <>
          Success
          <Check className="ml-2 animate-pulse text-green-500" />
        </>
      )}
    </Button>
  )
}
