import styles from "../style";
import propTypes from "prop-types";
import { lorem_ipsum, lorem_ipsum_premium, lorem_ipsum_starter } from "../consts";

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-[200px] sm:h-[350px] md:h-min w-64 pb-4 border-4 rounded-xl border-stone-200 bg-gray-200 div-transition scale-105 sm:scale-110";
  const inactiveStyle =
    "h-[200px] sm:h-[350px] md:h-min w-64 pb-4 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 mt-24 xs:mt-2 xs:pt-8 gap-1 h-full`}
      >
        <h1 className={`text-center text-2xl sm:text-[40px] font-bold`}>
          Zacznij dodawać <br className="block md:hidden" /> ogłoszenie z izaac.pl
        </h1>
        <p className={`text-center text-xl mt-3`}>
          Wybierz pakiet najlepiej <br className="block md:hidden" />odpowiadający Twoim potrzebom
        </p>
      </div>
      <div className="h-[300px] sm:h-[600px]">
      <div className={` ${styles.flexStart} ${styles.paddingX} gap-3 xs:gap-5 sm:gap-8 mt-6`}>
      
        <div
          className={
            formData.posting_option === "M" ? activeStyle : inactiveStyle
          }
          onClick={handleDivClick("M")}
        >
          <p
            className={`font-poppins text-l 
          sm:text-xl text-center mt-4`}>
            Starter
          </p>
          <ul className="hidden md:block">
            {lorem_ipsum_starter.map((lorem_ipsum) =>
              (<li className="text-sm lista-outside mx-8 text-justify list-inside">{lorem_ipsum}</li>)
            )}
          </ul>
        </div>
        <div className="h-[150px]  sm:h-[250px] md:h-[300px] w-0.5 bg-gray-300"></div>
        <div
          className={
            formData.posting_option === "S" ? activeStyle : inactiveStyle
          }
          onClick={handleDivClick("S")}
        >
          <p className={`font-poppins text-l sm:text-xl  text-center mt-4`}>Standard</p>
          <div className="mt-2">
            <p className={`font-poppins text-sm sm:text-[14px] text-center mb-2`}>
              najczęsciej wybierany
            </p>
            <ul className="hidden md:block">
            {lorem_ipsum.map((lorem_ipsum) =>
              (<li className="text-sm lista-outside mx-8 text-justify list-inside">{lorem_ipsum}</li>)
            )}
          </ul>
          </div>
        </div>

        <div className="h-[150px] sm:h-[250px] md:h-[300px] w-0.5 bg-gray-300"></div>
        <div
          className={
            formData.posting_option === "P" ? activeStyle : inactiveStyle
          }
          onClick={handleDivClick("P")}
          style={{ cursor: "pointer" }}
        >
          <p className={`font-poppins text-l sm:text-xl  text-center mt-4`}>Premium</p>
          <ul className="hidden md:block">
            {lorem_ipsum_premium.map((lorem_ipsum) =>
              (<li className="text-sm lista-outside mx-8 text-justify list-inside">{lorem_ipsum}</li>)
            )}
          </ul>
        </div>
      </div>
      </div>
      <div className="w-full">
        <button
          type="button"
          onClick={nextStep}
          className="absolute inset-x-0 md:-left-4 bottom-[4rem] mx-auto 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>
    </>
  );
};

StepOneJoblisting.propTypes = {
  nextStep: propTypes.func,
  handleChange: propTypes.func,
  formData: propTypes.object,
};

export default StepOneJoblisting;