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

import { CardHeader } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MoreHorizontal20Regular } from "@fluentui/react-icons";

export const Default = () => {
    const assetUrl = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
    const powerpointLogoURL = `${assetUrl}pptx.png`;
    const styles = /* css */ `
      .card-header-example__header {
        width: 300px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CardHeader className="card-header-example__header" image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }} header={<Text preset="body">
              <b>App Name</b>
            </Text>} description={<Text preset="bodyS">Developer</Text>} action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options"/>}/>
      </>);
};

export default Default;