import { useCallback, useState } from "react";
import { StoryOne } from "./Story1";
import { StoryTwo } from "./Story2";
import { StoryThree } from "./Story3";

export function StorySec() {
  const [style, setStyle] = useState("1");

  const handleAddInvite = useCallback(
    (v: any) => {
      console.log(v);
      setStyle(v);
    },
    [style]
  );
  return (
    <>
      <div className="grid grid-cols-1 lg:grid-cols-3 md:gap-10 w-full max-w-screen-2xl my-20 px-6 lg:px-20">
        <div className="w-full mb-10 ">
          <div className="flex flex-col gap-8">
            <button
              className={
                "text-white rounded-lg p-10 lg:mr-20 text-start " +
                (style === "1" ? "card" : "bg-black")
              }
              // onClick={
              //   setButton("1")
              // }
              onMouseEnter={() => handleAddInvite("1")}
            >
              <h1 className="text-xl font-semibold">
                Detailing our brand story
              </h1>
              <h2 className="text-lg mt-4">But what is ANTL?</h2>
            </button>
            <button
              className={
                "text-white rounded-lg p-10 lg:mr-20 text-start " +
                (style === "2" ? "card" : "bg-black")
              }
              onMouseEnter={() => handleAddInvite("2")}
            >
              <h1 className="text-xl font-semibold">Principle of operations</h1>
              <h2 className="text-lg mt-4">
                The organization is fractal in structure
              </h2>
            </button>
            <button
              className={
                "text-white rounded-lg p-10 lg:mr-20 text-start " +
                (style === "3" ? "card" : "bg-black")
              }
              onMouseEnter={() => handleAddInvite("3")}
            >
              <h1 className="text-xl font-semibold">
                Organizational Structure
              </h1>
              <h2 className="text-lg mt-4">Some headline will come here</h2>
            </button>
          </div>
        </div>
        <div className="col-span-2 h-9 w-full h-fit">
          {style === "1" ? (
            <StoryOne />
          ) : style === "2" ? (
            <StoryTwo />
          ) : (
            <StoryThree />
          )}
        </div>
      </div>
      <style jsx>{`
        .card {
          background: linear-gradient(
            96.36deg,
            #ffff00 -15.3%,
            #ffd316 -8.64%,
            #ff9c32 0.8%,
            #ff6c4a 10.32%,
            #ff455d 19.7%,
            #ff276c 28.91%,
            #ff1177 37.92%,
            #ff047e 46.63%,
            #ff0080 54.68%,
            #0026ff 131.34%
          );
        }
      `}</style>
    </>
  );
}
