import React from "react";
import Button from "../../../shared/reusableComponents/Reusablebutton";

const typeOptions = ["Apartment", "Townhouse", "Villa", "Penthoue"];

interface BodyTwoProps {
  setPops: (value: string) => void;
  input: { type?: string };
  setInput: (input: { type?: string }) => void;
}

const BodyTwo: React.FC<BodyTwoProps> = ({ setPops, input, setInput }) => {
  const three = () => {
    setPops("com3");
    localStorage.setItem("type", JSON.stringify(input));
 
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  const handelInputChange = (value) => {
    setInput({ ...input, type: value });
  };

  return (
    <div>
      <div className="bg-neutral-300 h-[8px] md:w-[534px] w-[200px] mt-6 rounded-b-xl  rounded-t-xl mx-auto my-auto">
        <div className="bg-[#CEA768] h-[8px] w-2/5 mt-6 rounded-b-xl  rounded-t-xl"></div>
      </div>
      <h1 className="flex justify-center items-center text-black mt-3 font-light font-[Roboto] text-[16px]">
        Step 2/5
      </h1>
      <h1 className="text-black flex justify-center items-center font-normal font-[Raleway] text-[12px] sm:text-[20px] md:text-[24px]">
        Pick Your Perfect Property Type
      </h1>
      <h1 className="text-[#6B665F] text-[10px] sm:text-[16px] md:text-[18px] text-lg font-[Raleway] flex justify-center items-center text-center">
        What type of property are you looking for? Let us know so we can tailor
        our recommendations!
      </h1>
      <form
        onSubmit={handleSubmit}
        className="flex gap-6 mt-20 flex-wrap justify-center items-center "
      >
        {typeOptions.map((option, index) => (
          <label
            key={option}
            htmlFor={option}
            className={`flex justify-start  items-center w-[170px] md:w-[349px] md:h-[54px] text-black hover:text-[#CEA768] border-2 border-[#C8C8CA] p-3 rounded-xl hover:border-[#CEA768] cursor-pointer
                               ${
                                 input.type === option
                                   ? "text-[#CEA768] border-[#CEA768]"
                                   : ""
                               }
                               `}
          >
            <input
              onChange={() => handelInputChange(option)}
              value="option"
              id={option}
              name="radio-group2"
              type="radio"
              className=" mr-5 w-[17px] h-[17px] cursor-pointer flex items-center justify-center text-[#CEA768] appearance-none  border-2 border-gray-400 hover:border-[#CEA768] rounded-full checked:bg-[#CEA768] checked:border-transparent focus:outline-3 focus:outline-offset-3 focus:outline-[#CEA768] active:bg-[#CEA768] ml-2 "
              checked={input.type === option}
            />
            <h1
              className={`flex justify-center font-[Raleway] mt-1 font-normal items-center text-[18px]
                          ${input.type === option ? "text-[#CEA768]" : ""} 
                          `}
            >
              {option}
            </h1>
          </label>
        ))}
      </form>
      <div
        className="my-6 lg:m-5 xl:mt-9 mx-4 lg:0 md:my-5  sm:my-5 font-semibold flex justify-center items-center mt-13
      "
      >
        <Button onClick={three} styleMe>
          Continue
        </Button>
      </div>
    </div>
  );
};

export default BodyTwo;