import React from 'react';
import {Offcanvas, OffcanvasProps} from 'react-bootstrap';
import "./OffCanvas.scss"

const {Header, Title, Body} = Offcanvas;

interface CanvasProps extends OffcanvasProps {
  title: string,
}

const Canvas = ({title, children, ...props}: CanvasProps) => {
  return (
    <Offcanvas backdropClassName={'canvas-backdrop'} {...props}>
      <Header closeButton>
        <Title>{title}</Title>
      </Header>
      <Body>
        {children}
      </Body>
    </Offcanvas>
  );
};

export default Canvas;
export {Canvas, CanvasProps};