"use client";

const LoginStep = ({ phoneNumber, setPhoneNumber, ConfirmPhoneNumber }) => {
  return (
    <div className="text-center mt-5">
      <p className="mb-0 text-gray-300 text-base">ورود / ثبت نام</p>
      <p className="mb-0 text-gray-600 text-lg mt-2">
        شماره موبایل خود را وارد کنید
      </p>

      <div className="mt-2">
        <input
          type="text"
          className="form-control !border-0 !bg-gray-200"
          onChange={(e) => setPhoneNumber(e.target.value)}
        />

        <div className="">
          <button
            className="btn btn-primary w-full rounded-xl py-3 mt-3"
            onClick={() => ConfirmPhoneNumber()}
          >
            ورود و ثبت نام
          </button>
        </div>

        <div className="mt-4">
          <p className="mb-0 text-sm px-4 rtl">
            با ورود و یا ثبت نام در وسمه شما{" "}
            <small className="text-primary-400 text-sm font-semibold">
              شرایط و قوانین
            </small>{" "}
            استفاده از سرویس های سایت وسمه و قوانین حریم خصوصی آن را می پذیرید.
          </p>
        </div>
      </div>
    </div>
  );
};

export default LoginStep;