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

import type { JSXElement } from "@coreai-ds/react-components";
import { TeachingPopover } from "@coreai-ds/react-components";
import { TeachingPopoverTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { TeachingPopoverSurface } from "@coreai-ds/react-components";
import { TeachingPopoverHeader } from "@coreai-ds/react-components";
import { TeachingPopoverBody } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import { TeachingPopoverTitle } from "@coreai-ds/react-components";
import { TeachingPopoverFooter } from "@coreai-ds/react-components";
import * as React from 'react';

const swapImage = 'https://fabricweb.azureedge.net/fabric-website/assets/images/wireframe/image-square.png';

export const AppearanceBrand = (): JSXElement => (<TeachingPopover appearance="brand">
    <TeachingPopoverTrigger>
      <Button>TeachingPopover trigger</Button>
    </TeachingPopoverTrigger>
    <TeachingPopoverSurface>
      <TeachingPopoverHeader>Tips</TeachingPopoverHeader>
      <TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage}/>}>
        <TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
        <div>This is a teaching popover body</div>
      </TeachingPopoverBody>
      <TeachingPopoverFooter primary="Learn more" secondary="Got it"/>
    </TeachingPopoverSurface>
  </TeachingPopover>);

export default AppearanceBrand;