/** @jsxRuntime classic */
/** @jsx jsx */

import * as React from 'react';
import { css, jsx, useTheme } from '@emotion/react';
import { IColors } from '../../../../types/theme';
import { NewBooking } from '../../muleculos/newBooking';

const container = (isLeftWindow: boolean, colors: IColors) => css`
  display: flex;
  background: white;
  top: 0;
  left: 0;
  margin-left: ${isLeftWindow ? '0' : '-320px'};
  opacity: ${isLeftWindow ? '1' : '0'};
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 600ms, background 0.3s;
  position: relative;
  bottom: 0;
  width: 320px;
  z-index: 1;
  border-right: 1px solid ${colors.bg_border_seperator};
`;

export const LeftWindow = ({ isLeftWindow, setLeftWindow }) => {
  const colors = useTheme();
  return (
    <div css={container(isLeftWindow, colors)}>
      <NewBooking />
    </div>
  );
};