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

import type { PopoverProps } from "@coreai-ds/react-components";
import * as React from 'react';
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";

export const Default = (props: Omit<PopoverProps, 'children'>) => {
    const ExampleContent = (): React.JSX.Element => (<div className="popover-default-example__content">
        <h3 className="popover-default-example__content-header">Popover content</h3>

        <div>This is some popover content</div>
      </div>);
    const styles = /* css */ `
      .popover-default-example__content-header {
        margin-top: 0;
      }
    `;
    return (<>
        <style>{styles}</style>
        <Popover {...props}>
          <PopoverTrigger disableButtonEnhancement>
            <Button>Popover trigger</Button>
          </PopoverTrigger>

          <PopoverSurface className="popover-default-example" tabIndex={-1}>
            <ExampleContent />
          </PopoverSurface>
        </Popover>
      </>);
};

export default Default;