import { motion } from 'framer-motion';
import { Loader2 } from 'lucide-react';

interface AuthSubmitButtonProps {
  isPending: boolean;
  loadingText?: string;
  defaultText: string;
  icon: React.ReactNode;
}

export function AuthSubmitButton({
  isPending,
  loadingText = 'Memproses...',
  defaultText,
  icon,
}: AuthSubmitButtonProps) {
  return (
    <motion.button
      type="submit"
      disabled={isPending}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      className="w-full bg-yellow-400 text-gray-900 py-3.5 rounded-lg font-black uppercase tracking-wider hover:bg-yellow-500 shadow-sm transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed mt-2 cursor-pointer"
    >
      {isPending ? (
        <>
          <Loader2 className="w-4 h-4 animate-spin" />
          {loadingText}
        </>
      ) : (
        <>
          {icon}
          {defaultText}
        </>
      )}
    </motion.button>
  );
}