/** @jsxRuntime classic */
/** @jsx jsx */
import * as React from 'react';
import { Button, getIcon } from '../../index';
import { css, jsx, useTheme } from '@emotion/react';
import { IColors } from '../../../types/theme';

const container = (colors: IColors) => css`
  background: white;
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid ${colors.bg_border_seperator};
  h1 {
    margin: 0;
  }
`;
const flex = css`
  display: flex;
  align-items: center;
`;

export const Header = ({ handleNewBooking, handleSearch }) => {
  const colors = useTheme();
  return (
    <div css={container(colors)}>
      <div css={flex}>
        <h1>Calendar</h1>
        <Button sizer="S" theme="basic">
          Facility
        </Button>
      </div>
      <div css={flex}>
        <Button sizer="S" theme="primary" onClick={handleNewBooking}>
          {getIcon('plus', 'r')} New Booking
        </Button>
        <div>{getIcon('more', 'l')}</div>
        <div onClick={handleSearch}>{getIcon('search', 'l')}</div>
      </div>
    </div>
  );
};