import { useEffect, useState } from "react";
import Button3 from "./Button3";
import CloseIcon from "./icons/CloseIcon";

interface Props {
  sidebarComponent: {
    element: JSX.Element;
    name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
    desc?: string;
  } | null;
  onClose: () => void;
}

function FloorSidebarContainer({ sidebarComponent, onClose }: Props) {
  const [component, setComponent] = useState(sidebarComponent);

  useEffect(() => {
    if (!sidebarComponent) return;
    setComponent(sidebarComponent);
  }, [sidebarComponent]);

  return (
    <div
      className={`fixed top-[54px] right-0 lg:w-1/2 w-full bg-[#F3F3F2] h-[calc(100dvh-54px)] flex flex-col p-6 space-y-6 transition-all duration-300 z-10 ${
        sidebarComponent ? "opacity-100 " : "opacity-50 translate-x-full"
      } ${component?.name !== "Floor" ? "overflow-auto" : ""}`}
    >
      <div className="flex justify-between">
        <div className="self-center">
          <p className="text-2xl font-semibold text-[#0D1922]">
            {component?.name === "Floor" ? `${component.element.props.floor} floor` : component?.name}
          </p>
          <p className="text-sm">{component?.desc}</p>
        </div>
        <Button3 icon={<CloseIcon className="w-5 h-5" />} onlyIcon onClick={onClose} className="self-start" />
      </div>

      {component?.element}
    </div>
  );
}

export default FloorSidebarContainer;