Untitled

import { useState } from "react";
import { ImShrink2 } from "react-icons/im";
import { RiCloseFill } from "react-icons/ri";


function CreateCarriers({ openCareerForm, setIsOpen }) {
  const [showDocFormBody, setShowDocFormBody] = useState(true);
  const [phoneNumbers, setPhoneNumbers] = useState([""]); // Stores multiple phone numbers
  const [emails, setEmails] = useState([""]); // Stores multiple emails

  

const addPhoneNumber = () => {
  setPhoneNumbers([...phoneNumbers, ""]);
};

const removePhoneNumber = (index) => {
  setPhoneNumbers(phoneNumbers.filter((_, i) => i !== index));
};

const addEmail = () => {
  setEmails([...emails, ""]);
};

const removeEmail = (index) => {
  setEmails(emails.filter((_, i) => i !== index));
};
const handleSubmit = () => {
  console.log("Submitted");
};




  return (
    <div className="fixed bottom-0 z-20 right-0 flex items-center justify-center">
      <div className="max-w-3xl max-h-[90vh] overflow-y-auto sm:min-w-xl xl:min-w-3xl w-full mx-auto bg-white border rounded-md shadow-lg">
        <div className="py-2 sticky top-0 px-4 flex justify-between items-center text-white bg-[#313131] border-b">
          <h4 className="font-medium text-base">New Carrier</h4>
          <div className="flex justify-center items-center gap-4">
            <ImShrink2
              onClick={() => setShowDocFormBody(!showDocFormBody)}
              className="text-lg cursor-pointer"
            />
            <RiCloseFill
              onClick={() => setIsOpen(false)}
              className="text-xl cursor-pointer"
            />
          </div>
        </div>
        <div className={`${showDocFormBody ? "block" : "hidden"}`}>
          <div className="">
            <div className="p-4">
              <h2 className="text-lg font-semibold mb-4">Carrier Details</h2>
              <div className="flex w-full  gap-4">
                <div className="flex-1 w-full">
                  {/* Carrier Name */}
                  <div className="flex border-b border-gray-300">
                    <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100">
                      Carrier Name
                    </div>
                    <input
                      type="text"
                      placeholder="Carrier Name"
                      className="w-2/3 p-2 border-none focus:ring-0 outline-none"
                    />
                  </div>

                  {/* DOT number*/}
                  <div className="flex border-b border-gray-300">
                    <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100">
                      DOT Number
                    </div>
                    <input
                      type="text"
                      placeholder="DOT Number"
                      className="w-2/3 p-2 border-none focus:ring-0 outline-none"
                    />
                  </div>

                  {/* MC Number */}
                  <div className="flex border-b border-gray-300">
                    <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100">
                      MC Number
                    </div>
                    <input
                      type="text"
                      placeholder="MC number"
                      className="w-2/3 p-2 border-none focus:ring-0 outline-none"
                    />
                  </div>

                  {/*SCAC Number */}
                  <div className="flex border-b border-gray-300 mb-2">
                    <div className="w-1/3 py-2 px-3 font-semibold bg-gray-100">
                      SCAC
                    </div>
                    <input
                      type="text"
                      placeholder="MC number"
                      className="w-2/3 p-2 border-none focus:ring-0 outline-none"
                    />
                  </div>
                  {/* Notes */}
                  <div className="flex border-b border-gray-300">
                    <div className="w-1/3 p-2 font-semibold bg-gray-100">
                      Notes
                    </div>
                    <textarea
                      placeholder="Notes"
                      className="w-2/3 p-2 border-none focus:ring-0 outline-none h-14"
                    ></textarea>
                  </div>
                </div>

                {/* Customer Section */}
                <div className="max-w-[220px] space-y-6 w-full">
                  <div className="border border-gray-200 w-full h-max p-4 rounded-md text-center">
                    <div className="text-xl">🏢</div>
                    <p className="text-sm mt-2">Connect a Customer</p>
                    <button className="text-black text-[11px] font-semibold mt-2">
                      ADD CUSTOMER
                    </button>
                  </div>
                  <div className="border border-gray-200 w-full h-max p-4 rounded-md text-center">
                    <div className="text-xl">🏢</div>
                    <p className="text-sm mt-2">Connect a Customer</p>
                    <button className="text-black text-[11px] font-semibold mt-2">
                      ADD CUSTOMER
                    </button>
                  </div>
                  <div className="border border-gray-200 w-full h-max p-4 rounded-md text-center">
                    <div className="text-xl">🏢</div>
                    <p className="text-sm mt-2">Connect a Customer</p>
                    <button className="text-black text-[11px] font-semibold mt-2">
                      ADD CUSTOMER
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div className="p-4 sticky bottom-0 flex justify-between bg-gray-100 rounded-b-lg">
              <button
                onClick={() => setContactForm(false)}
                className="px-4 py-2 bg-gray-300 rounded-md"
              >
                BACK
              </button>
              <button
                onClick={handleSubmit}
                className="px-4 py-2 bg-orange-500 text-white rounded-md"
              >
                SUBMIT
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default CreateCarriers;