import { useState } from "react";
// import { useSwipeable } from "react-swipeable";
import SkygardenIndoorLayout from "./SkygardenIndoorLayout";
import { ISwitchLabel } from "../../../types/switchLabel";
import SwitchToggle from "../../SwitchToggle";
import SkygardenOutdoorLayout from "./SkygardenOutdoorLayout";

const skygardenLayouts: ISwitchLabel[] = [
  { id: "1", label: "Indoor" },
  { id: "2", label: "Outdoor" },
];

const LayoutSlider = () => {
  const [currentLabel, setCurrentLabel] = useState<ISwitchLabel>(
    skygardenLayouts[0]
  );

  const handleOnSwitchClick = (label: ISwitchLabel) => {
    setCurrentLabel(label);
  };

  return (
    <div className="flex flex-col items-center">
      <SwitchToggle
        labels={skygardenLayouts}
        currentLabel={currentLabel}
        onClick={handleOnSwitchClick}
      />
      <div className="flex w-full overflow-x-hidden max-w-[1100px] mx-auto overflow-hidden select-none pt-6">
        <div
          className="flex w-full transition-all duration-300"
          style={{
            transform: `translateX(${
              0 + (Number(currentLabel.id) - 1) * -100
            }%)`,
          }}
        >
          <div
            className={`min-w-full flex flex-col px-6 transition-all duration-300 items-center`}
          >
            <SkygardenIndoorLayout />
          </div>
          <div
            className={`min-w-full flex flex-col px-6 transition-all duration-300 items-center`}
          >
            <SkygardenOutdoorLayout />
          </div>
        </div>
      </div>
    </div>
  );
};

export default LayoutSlider;