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

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

const useStyles = makeStyles({
    drawer: {
        width: '400px',
        height: '600px',
    },
});

export const WithTitle = (): JSXElement => {
    return (<InlineDrawer className={useStyles().drawer} open>
      <DrawerHeader>
        <DrawerHeaderTitle>Drawer with title</DrawerHeaderTitle>
        <DrawerHeaderTitle heading={{ as: 'h1' }}>Drawer with custom tag</DrawerHeaderTitle>
        <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />}/>}>
          Drawer with title and action
        </DrawerHeaderTitle>
      </DrawerHeader>
    </InlineDrawer>);
};

export default WithTitle;