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

const numberBedroomsOptions = ["1", "2", "3", "4", "+5"]

interface InputProps {
    number_bedrooms: string
}
interface BodyThreeProps {
    setPops: (value: string) => void
    input: InputProps
    setInput: (input: InputProps) => void
}
const BodyThree: React.FC<BodyThreeProps> = ({ setPops, input, setInput }) => {
    const four = () => {
        setPops("com4")
        localStorage.setItem("number_bedrooms", JSON.stringify(input))
    
    }
    const handelInputChange = (option: string) => {
        setInput({ ...input, number_bedrooms: option })
    }
    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-3/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 3/5
            </h1>
            <h1 className="text-black flex justify-center items-center font-normal font-[Raleway] text-[12px] sm:text-[20px] md:text-[24px]">
                Choose the Number of Bedrooms
            </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">
                How many bedrooms fit your needs? Let us know so we can find the best options for you.
            </h1>
            <div className="flex gap-6 mt-4 flex-wrap justify-center items-center">
                {numberBedroomsOptions.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.number_bedrooms === option ? "border-[#CEA768]" : ""
                        }`}
                    >
                        <input
                            onChange={() => handelInputChange(option)}
                            value={option}
                            id={option}
                            checked={input.number_bedrooms === option}
                            name="radio-group3"
                            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-[16px] ${
                                input.number_bedrooms === option ? "text-[#CEA768] text-[18px]" : ""
                            }`}
                        >
                            {index + 1} Bedroom
                        </h1>
                    </label>
                ))}
            </div>
            <div className="mt-11 lg:m-5 mx-4 lg:0  xl:mt-9  md:my-5  sm:my-5 font-semibold flex flex-col justify-end items-center">
                <Button
                    onClick={four}
                    styleMe
                >
                    Continue
                </Button>
            </div>
        </div>
    )
}

export default BodyThree