// 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 { useId } from "@coreai-ds/react-components";
import { Popover } from "@coreai-ds/react-components";
import { PopoverTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { PopoverSurface } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    contentHeader: {
        marginTop: '0',
    },
});

export const NonInteractiveContent = (): JSXElement => {
    const styles = useStyles();
    const headingId = useId('popover-heading');
    return (<Popover>
      <PopoverTrigger disableButtonEnhancement>
        <Button>Popover trigger</Button>
      </PopoverTrigger>

      <PopoverSurface tabIndex={-1} aria-labelledby={headingId}>
        <h3 id={headingId} className={styles.contentHeader}>
          Popover content
        </h3>
        <p>This is some non-interactive popover content.</p>
      </PopoverSurface>
    </Popover>);
};

export default NonInteractiveContent;