const Demo: React.FC = () => {
  const [isFlyoutAOpen, setFlyoutAOpen] = useState(false);
  const [isFlyoutBOpen, setFlyoutBOpen] = useState(false);

  return (
    <>
      <EuiText>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
          mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor
          neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim.
          Phasellus molestie magna non est bibendum non venenatis nisl tempor.
          Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
          posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor
          orci. Etiam at risus et justo dignissim congue. Donec congue lacinia
          dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci.
          Quisque eget odio ac lectus vestibulum faucibus eget in metus. In
          pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus
          tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.
        </p>
      </EuiText>
      <EuiSpacer size="m" />
      <EuiButton onClick={() => setFlyoutAOpen(true)}>Open Session A</EuiButton>
      <EuiSpacer size="s" />
      <EuiButton onClick={() => setFlyoutBOpen(true)}>Open Session B</EuiButton>
      {isFlyoutAOpen && (
        <EuiFlyout
          session="start"
          type="push"
          id="A"
          size="l"
          flyoutMenuProps={{ title: 'Flyout A' }}
          onClose={() => {
            action('Session A closed')();
            setFlyoutAOpen(false);
          }}
        >
          <EuiFlyoutBody>
            <EuiText>
              <p>This is the first flyout session with type set to push.</p>
            </EuiText>
          </EuiFlyoutBody>
        </EuiFlyout>
      )}
      {isFlyoutBOpen && (
        <EuiFlyout
          session="start"
          type="overlay"
          id="B"
          size="s"
          flyoutMenuProps={{ title: 'Flyout B' }}
          onClose={() => {
            action('Session B closed')();
            setFlyoutBOpen(false);
          }}
        >
          <EuiFlyoutBody>
            <EuiText>
              <p>This is the second flyout session with type set to overlay.</p>
            </EuiText>
          </EuiFlyoutBody>
        </EuiFlyout>
      )}
    </>
  );
};