import { useState } from "react";
import FirstSlide from "./slides/FirstSlide";
import SecondSlide from "./slides/SecondSlide";
import ThirdSlide from "./slides/ThirdSlide";

const slides = [
  { element: <FirstSlide />, id: 1 },
  { element: <SecondSlide />, id: 2 },
  { element: <ThirdSlide />, id: 3 },
];

const MainPageSlider = () => {
  const [offset, setOffset] = useState(-0);

  const handleRightArrowClick = () => {
    setOffset((currentOffset) => {
      if (currentOffset === -1 * slides.length + 1) {
        return 0;
      }

      return currentOffset - 1;
    });
  };

  const handleLeftArrowClick = () => {
    setOffset((currentOffset) => {
      if (currentOffset === 0) {
        return -1 * slides.length + 1;
      }

      return currentOffset + 1;
    });
  };
  return (
    <div className="flex flex-col">
      <div className="flex h-[calc(100vh-150px)] justify-between w-[calc(100vw-20px)] px-2 pt-20">
        <div className="w-[calc(100vw-80px)] overflow-hidden">
          <div
            className="flex transition-[1.25s]"
            style={{ transform: `translateX(calc(${offset}*100vw))` }}
          >
            {slides.map((slide) => (
              <div key={slide.id}>{slide.element}</div>
            ))}
          </div>
        </div>

        <div className="">
          <button
            onClick={handleLeftArrowClick}
            className="left-arrow absolute top-[50%] left-4 -translate-y-[50%]"
          ></button>
          <button
            className="right-arrow absolute top-[50%] right-4 -translate-y-[50%]"
            onClick={handleRightArrowClick}
          ></button>
        </div>
      </div>
    </div>
  );
};

export default MainPageSlider;
