// 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 Fit = (): JSXElement => (<>
    <h1>None</h1>
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/600x200.png" alt="Image placeholder" fit="none"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/200x100.png" alt="Image placeholder" fit="none"/>
    </div>

    <h1>Center</h1>
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/600x200.png" alt="Image placeholder" fit="center"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 150, width: 300 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/200x100.png" alt="Image placeholder" fit="center"/>
    </div>

    <h1>Contain</h1>
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x200.png" alt="Image placeholder" fit="contain"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 250, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x200.png" alt="Image placeholder" fit="contain"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 200, width: 450 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x200.png" alt="Image placeholder" fit="contain"/>
    </div>

    <h1>Cover</h1>
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x250.png" alt="Image placeholder" fit="cover"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/400x300.png" alt="Image placeholder" fit="cover"/>
    </div>
    <br />
    <div style={{ border: '1px solid green', height: 200, width: 400 }}>
      <Image src="https://fabricweb.azureedge.net/fabric-website/placeholders/600x200.png" alt="Image placeholder" fit="cover"/>
    </div>
  </>);

export default Fit;