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

import type { JSXElement } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import * as React from 'react';

export const Bordered = (): JSXElement => (<div>
    <div style={{ display: 'flex', gap: 8 }}>
      <Image alt="Allan's avatar" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg" height={200} width={200}/>
      <Image alt="Amanda's avatar" shape="rounded" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg" height={200} width={200}/>
      <Image alt="Erik's avatar" shape="circular" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg" height={200} width={200}/>
    </div>
    <div style={{ display: 'flex', gap: 8, marginTop: '15px' }}>
      <Image alt="Allan's avatar" bordered src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg" height={200} width={200}/>
      <Image alt="Amanda's avatar" bordered shape="rounded" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg" height={200} width={200}/>
      <Image alt="Erik's avatar" bordered shape="circular" src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg" height={200} width={200}/>
    </div>
  </div>);

export default Bordered;