// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { InlineDrawer } from "@coreai-ds/react-components";
import { DrawerHeader } from "@coreai-ds/react-components";
import { DrawerHeaderTitle } from "@coreai-ds/react-components";
import { DrawerBody } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        border: '2px solid #ccc',
        overflow: 'hidden',
        display: 'flex',
        height: '480px',
        backgroundColor: '#fff',
    },
    content: {
        flex: '1',
        padding: '16px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-start',
    },
});

export const AlwaysOpen = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <InlineDrawer separator open>
        <DrawerHeader>
          <DrawerHeaderTitle>Always open</DrawerHeaderTitle>
        </DrawerHeader>

        <DrawerBody>
          <p>Drawer content</p>
        </DrawerBody>
      </InlineDrawer>

      <div className={styles.content}>
        <p>This is the page content</p>
      </div>
    </div>);
};

export default AlwaysOpen;