import React from "react";
import styles from "../style";
const StepOneJoblisting = ({ nextStep, handleChange, formData }) => {
  // Funkcja do obsługi kliknięcia na div i aktualizacji stanu
  const handleDivClick = (value) => () => {
    handleChange("posting_option")({ target: { value: value } });
  };

  const activeStyle =
    "h-[500px] w-64 border-4 rounded-xl border-stone-200 bg-gray-200 div-transition scale-125";
  const inactiveStyle =
    "h-[500px] w-64 rounded-xl bg-gray-200 border-gray-200 div-transition cursor-pointer hover:bg-gray-300";
  return (
    <>
      <div
        className={` grid grid-cols-1 ${styles.paddingX} pb-8 pt-8 gap-1 h-full`}
      >
        <h1 className={`${styles.heading1} text-center`}>
          Zacznij dodawać ogłoszenie z izaac.pl
        </h1>
        <p className={`${styles.paragraph} text-center`}>
          Wybierz pakiet najlepiej odpowiadający Twoim potrzebom
        </p>
      </div>
      <div className={` ${styles.flexStart} ${styles.paddingX} gap-16 mt-20`}>
        {/* Przykładowe divy jako przyciski wyboru */}

        <div
          className={
            formData.posting_option === "M" ? activeStyle : inactiveStyle
          }
          onClick={handleDivClick("M")}
        >
          <p className={`${styles.paragraph} text-center mt-4`}>Starter</p>
        </div>
        <div className="h-[400px] w-0.5 bg-gray-300"></div>
        <div
          className={
            formData.posting_option === "S" ? activeStyle : inactiveStyle
          }
          onClick={handleDivClick("S")}
        >
          <p className={`${styles.paragraph} text-center mt-4`}>Standard</p>
          <div className="mt-6">
            <p className={`${styles.paragraph} text-center`}>
              najczęsciej wybierany
            </p>
          </div>
        </div>

        <div className="h-[400px] w-0.5 bg-gray-300"></div>
        <div
          className={
            formData.posting_option === "P" ? activeStyle : inactiveStyle
          }
          onClick={handleDivClick("P")}
          style={{ cursor: "pointer" }}
        >
          <p className={`${styles.paragraph} text-center mt-4`}>Premium</p>
        </div>
      </div>
      <div className="grid pt-32 items-center justify-center">
        <button
          type="button"
          onClick={nextStep}
          className="h-12 w-72 rounded-xl bg-gray-700 
            font-poppins font-semibold text-[14px] text-white 
            hover:scale-125 duration-300"
        >
          Przejdź do następnego kroku &nbsp;&nbsp;
          <span className="text-[18px]">→</span>{" "}
        </button>
        <div className="h-12 w-full"></div>
      </div>
    </>
  );
};

export default StepOneJoblisting;