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

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

export const ColorNeutral = (): JSXElement => {
    const styles = /* css */ `
      .avatar-example {
        display: flex;
        column-gap: var(--spacingHorizontalXXL);
      }

      .avatar-example__surface {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: var(--spacingVerticalS);
        padding: var(--spacingVerticalXXL);
        border-radius: var(--borderRadiusMedium);
      }

      .avatar-example__surface--background-4 {
        background-color: var(--colorNeutralBackground4);
      }

      .avatar-example__surface--background-1 {
        background-color: var(--colorNeutralBackground1);
      }

      .avatar-example__label {
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground2);
      }
    `;
    return (<>
      <style>{styles}</style>
      <div className="avatar-example">
        <div className="avatar-example__surface avatar-example__surface--background-1">
          <Avatar name="Alex Britez" color="neutral"/>
          <span className="avatar-example__label">color="neutral" (colorNeutralBackground4)</span>
        </div>
        <div className="avatar-example__surface avatar-example__surface--background-4">
          <Avatar name="Alex Britez" color="neutral-alt"/>
          <span className="avatar-example__label">
            color="neutral-alt" (colorNeutralBackground1)
          </span>
        </div>
      </div>
    </>);
};

export default ColorNeutral;