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

import { Card } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { CardPreview } from "@coreai-ds/react-components";
import { CardFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { ArrowReplyRegular } from "@fluentui/react-icons";
import { ShareRegular } from "@fluentui/react-icons";
import * as React from 'react';

export const Default = () => {
    const resolveAsset = (asset: string) => {
        const assetUrl = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
        return `${assetUrl}${asset}`;
    };
    const styles = /* css */ `
      .card-default-example {
        margin: auto;
        max-width: 720px;
        width: 100%;
      }
    `;
    return (<>
        <style>{styles}</style>
        <Card className="card-default-example">
          <CardHeader image={<img src={resolveAsset('avatar_elvia.svg')} alt="Elvia Atkins avatar picture"/>} header={<Text preset="body">
                <b>Elvia Atkins</b> mentioned you
              </Text>} description={<Text preset="bodyS">5h ago · About us - Overview</Text>}/>

          <CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word document"/>}>
            <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document: About Us - Overview"/>
          </CardPreview>

          <CardFooter>
            <Button icon={<ArrowReplyRegular fontSize={16}/>}>Reply</Button>
            <Button icon={<ShareRegular fontSize={16}/>}>Share</Button>
          </CardFooter>
        </Card>
      </>);
};

export default Default;