import { Loader2 } from "lucide-react";
import { useTranslation } from "react-i18next";

export default function ButtomStepTwo({ setStep, isLoading, formData, type }) {
  const { t } = useTranslation();
  return (
    <>
      <button type="button" onClick={() => setStep(1)} className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">
        {t("register.previous")}
      </button>
      <button
        type="submit"
        disabled={isLoading || !formData.agreeTerms}
        className={`flex-1 bg-gradient-to-r${type === "owner" ? "  from-amber-500 to-amber-600" : " from-blue-500 to-blue-600"}  text-amber-50 py-3 px-4 rounded-xl font-medium${type === "onwer" ? "hover:from-amber-600 hover:to-amber-700" : "hover:from-blue-600 hover:to-blue-700"} transition-all disabled:opacity-50 disabled:cursor-not-allowed`}
      >
        {isLoading ? (
          <div className="flex items-center justify-center gap-2">
            <Loader2 className="w-5 h-5 animate-spin" />
            <span>{t("register.registering")}</span>
          </div>
        ) : (
          t("register.createAccount")
        )}
      </button>
    </>
  );
}