import React, { Fragment, FunctionComponent as FC } from "react";
import { Transition } from "@headlessui/react";
import classNames from "classnames";

type LeftColumnProps = {
  children: React.ReactNode;
  openLeftBar?: boolean;
  widthElement?: number;
  className?: string;
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;

const LeftColumn: React.FC<LeftColumnProps> = ({
  className,
  children,
  widthElement = 0,
  openLeftBar = false,
}): JSX.Element => {
  const mdScreen = 768;
  return (
    <Transition
      appear
      as={Fragment}
      show={widthElement < mdScreen ? openLeftBar : true}
      enter={classNames(
        widthElement < mdScreen ? "ease-in-out duration-150" : "transition-none"
      )}
      enterFrom="-translate-x-full"
      enterTo="translate-x-0"
      leave="ease-in-out duration-150"
      leaveFrom="translate-x-0"
      leaveTo="-translate-x-full"
    >
      <div
        className={classNames(
          "h-full left-bar",
          {
            "fixed inset-0 w-80": widthElement < mdScreen,
          },
          className
        )}
      >
        {children}
      </div>
    </Transition>
  );
};

LeftColumn.displayName = "LeftColumn";
export default LeftColumn;