import React, { useState } from "react";

const MobileNoModal = ({
  setMobileNo,
}: {
  setMobileNo: (mobileNumber: string) => void;
}) => {
  const [mobileNumber, setMobileNumber] = useState("");
  const [error, setError] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setMobileNumber(event.target.value);
  };

  const handleSubmit = () => {
    if (mobileNumber.length !== 11 || !mobileNumber.startsWith("01")) {
      setError('Mobile number must be 11 digits and start with "01"');
    } else {
      setError("");
      setMobileNo(mobileNumber);
    }
  };

  return (
    <div
      className="fixed inset-0 flex justify-center items-center bg-gray-400 bg-opacity-30
    "
    >
      <div className="bg-blue-2 p-6 rounded-lg max-w-md max-sm:w-[90%] ">
        <h2 className="text-2xl text-black font-bold mb-4">Enter Mobile Number</h2>
        <input
          type="text"
          value={mobileNumber}
          onChange={handleChange}
          placeholder="e.g.,01*********"
          className="w-full px-4 py-2 border border-gray-300 rounded-md mb-4"
        />
        {error && <p className="text-red-500 mb-4">{error}</p>}
        <button
          onClick={handleSubmit}
          className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
        >
          Submit
        </button>
      </div>
    </div>
  );
};

export default MobileNoModal;