'use client'

import { useFormStatus } from 'react-dom'
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-react'

interface Props extends React.HTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode
}

const ActionButton = ({ children, ...rest }: Props) => {
  const { pending } = useFormStatus()

  return (
    <Button {...rest} className="w-full" disabled={pending}>
      {pending ? (
        <Loader2 className="text-white mr-2 h-5 w-5 animate-spin" />
      ) : (
        children
      )}
    </Button>
  )
}

export default ActionButton