import React from "react";
import img1 from "@/public/assets/img/1.png";
import img2 from "@/public/assets/img/2.jpg";
import Image from "next/image";
import Button from "../../../shared/reusableComponents/Reusablebutton";

const goalsOptions = ["Personal Use", "Investment"];

interface InputProps {
  goals: string;
}

interface BodyOneProps {
  setPops: (value: string) => void;
  input: InputProps;
  setInput: (input: InputProps) => void;
}

const BodyOne: React.FC<BodyOneProps> = ({ setPops, input, setInput }) => {
  const two = () => {
    setPops("com2");
    localStorage.setItem("goals", JSON.stringify(input));
 
  };

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

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

 

  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-1/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 1/5
      </h1>
      <h1 className="text-black flex justify-center items-center font-normal font-[Raleway] text-[12px] sm:text-[20px] md:text-[24px]">
        Define Your Property Goal
      </h1>
      <h1 className="text-[#6B665F] text-[10px] sm:text-[16px] md:text-[18px] text-lg font-[Raleway] flex justify-center items-center text-center">
        Are you planning to buy your dream home or grow your investment
        portfolio?
      </h1>
      <form
        onSubmit={handleSubmit}
        className="flex gap-6 mt-3 lg:flex-row flex-col justify-between items-center"
      >
        {goalsOptions.map((option, index) => (
          <label
            key={option}
            htmlFor={option}
            className={` xl:ml-[-5] lg:ml-5 md:h-[263px] h-[200px] cursor-pointer text-black hover:text-[#CEA768] border-2 border-[#C8C8CA] md:p-3 p-1 rounded-xl hover:border-[#CEA768] 
             ${input.goals === option ? "!border-[#CEA768]" : ""}`}
          >
            <input
              id={option}
              onChange={() => handelInputChange(option)}
              checked={input.goals === option}
              value={option}
              name="radio-group1"
              type="radio"
              className="appearance-none visibility-hidden "
            />
            <Image
              width={700}
              height={700}
              className=" w-[200px] lg:w-[326px] md:w-[250px]  md:h-[208px] h-[150px] mt-[-10px] bg-cover rounded-xl xl:mt-[-35px] lg:mt-[-18px] md:mt-[-17px] sm:mt-[-16px]"
              src={index === 0 ? img1 : img2}
              alt="goaloption"
            />
            <h1
              className={` flex justify-center font-[Raleway] mt-1 font-normal md:text-[16px] text-[15px] ${
                input.goals === option ? "text-[#CEA768]" : ""
              }`}
            >
              {option}
            </h1>
          </label>
        ))}
      </form>
      <div className=" my-6 lg:m-5 mx-4 lg:0 xl:mt-9 md:my-5  sm:my-5 font-semibold flex justify-center items-center mt-13">
        <Button onClick={two} styleMe>
          Continue
        </Button>
      </div>
    </div>
  );
};

export default BodyOne;