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

const rangeOptions = ["500k", "500k_1m", "1m_2m", "+2m"]

interface InputProps {
    range: string
}
interface BodyFourProps {
    setPops: (value: string) => void
    input: InputProps
    setInput: (input: InputProps) => void
}
const BodyFour: React.FC<BodyFourProps> = ({ setPops, input, setInput }) => {
    const five = () => {
        setPops("com5")
        localStorage.setItem("range", JSON.stringify(input))
   
    }

    const handelInputChanges = (value) => {
        setInput({ ...input, range: 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-4/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 4/5
            </h1>
            <h1 className="text-black flex justify-center items-center font-normal font-[Raleway] text-[12px] sm:text-[20px] md:text-[24px]">
                {" "}
                Set Your Budget Range (in AED)
            </h1>
            <h1 className="text-[#6B665F] text-wrap text-[10px] sm:text-[16px] md:text-[18px] text-lg font-[Raleway] flex justify-center items-center text-center">
                {" "}
                Set your budget range in AED to help us provide the best solutions for your needs.
            </h1>
            <div className="flex gap-6 mt-4 flex-wrap justify-center items-center">
                {rangeOptions.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.range === option ? " border-[#CEA768]" : ""
                        }`}
                    >
                        <input
                            onChange={() => handelInputChanges(option)}
                            value={option}
                            id={option}
                            checked={input.range === option}
                            name="radio-group4"
                            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"
                        />
                        <h1
                            className={`flex justify-center font-[Roboto] mt-1 font-light items-center md:text-[20px] text-[12px]
          ${input.range === option ? "text-[#A37130] text-[18px]" : ""}`}
                        >
                            {option}
                        </h1>
                    </label>
                ))}
            </div>
            <div className=" lg:m-5  mx-4 lg:0 xl:mt-30 md:my-5 sm:my-5 mt-16 font-semibold flex justify-center items-center">
                <Button
                    onClick={five}
                    styleMe
                >
                    Continue
                </Button>
            </div>
        </div>
    )
}

export default BodyFour