import React, {useState} from "react";
import reg from "../assets/seller-reg/sellerreg.svg";
import { useNavigate } from "react-router-dom";

function Create_account() {
  const navigate = useNavigate();
          const goto = () => {
              navigate("/create-account");
          };
  const Infoicon = () =>(
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline-block ml-1">
    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" />
  </svg>
  );
  const [phoneNumber, setPhoneNumber] = useState("");
  const [phoneNumberError,  setPhoneNumberError]= useState("");

  const handleSendOtp = (e) => {
    e.preventDefault();

    if (phoneNumber.length !== 10) {
      setPhoneNumberError("*Enter a vaild PhoneNumer, please Enter PhoneNumber");
      return false;
    }
    setPhoneNumberError("");
    return true;

    // Navigate to OTP page and pass phoneNumber as state
    //navigate("/otp-verification", { state: { phoneNumber } });
  };
  return (
    <>
      <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
        {/* Header */}
        <div className="w-full text-left max-w-6xl px-2 md:px-0 mb-6 mt-6 ml-30 flex">
          <h1 className="text-[20px] md:text-[48.31px] font-[700px] text-[#030A1E] relative ">
            OMPOI - Seller
          </h1>
        </div>

        <div className="flex flex-col md:flex-row items-center justify-center w-full max-w-5xl  bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg">
          {/* Left Section - Image */}
          <div className="w-fit md:w-1/2 flex justify-center md:pr-8 relative">
            <img
              src={reg}
              alt="Login Illustration"
              className="max-w-xs md:max-w-lg p-3 "
            />
            <div className="hidden md:block absolute right-0 top-[-17px] bottom-0 w-[1px] h-[460px] bg-[#E2E7EE] "></div>
          </div>

          {/* Right Section - otp registration */}
          <div className="w-full md:w-1/2 flex flex-col items-center md:pl-8 mt-[40px] md:mt-7 p-2 md:p-15">
            <h2 className="text-[18px] md:text-[24.91px] font-semibold mb-2 self-center">Merchant Registration</h2> <br />
            <h2 className="text-[18px] md:text-[24.91px] font-semibold mt-[-20px] justify-center items-center self-center mb-[50px]">OTP-Verification</h2>
            <form className="w-full max-w-sm">
              <div className="relative mb-8">
                <label className={`text-[10px] md:text-[18px] text-[#8B9BB1] p-[0.5px] px-1 relative top-1 left-6 bg-white ${phoneNumberError ? "border-red-500" : "border-green-500 "}`}>
                  Phone Number
                </label>
                <input type="text" id="phoneNumber" onChange={(e) => {
                  setPhoneNumber(e.target.value);
                  handleSendOtp(e.target.value);
                }}
                value={phoneNumber} className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none "placeholder="+91" />
                {phoneNumberError && <p className="text-red-500 text-[10px]">{phoneNumberError} <Infoicon /> </p>}
                </div>
                <div className="flex justify-center items-center">
                  <button className="w-30 md:w-52 px-5 md:px-10 bg-[#fdba74] text-[#020617] py-1.5 md:py-3.5 rounded-[20.8px] md:rounded-[32.6px] mb-14 font-semibold">Send Otp</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

export default Create_account;