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

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

export const Appearance = () => {
    const appearanceSample = `import { Button } from "@coreai-ds/react-components";

export function Save(): JSX.Element {
  return <Button appearance="primary">Save</Button>;
}`;
    const styles = /* css */ `
      .code-block-appearance-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalXL);
      }

      .code-block-appearance-example__heading {
        margin: 0;
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }

      .code-block-appearance-example__filled-surface {
        background-color: var(--colorNeutralBackground3);
        margin-inline: calc(-3 * var(--spacingHorizontalL));
        padding-inline: calc(3 * var(--spacingHorizontalL));
        padding-block: var(--spacingVerticalXL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="code-block-appearance-example">
          <div>
            <p className="code-block-appearance-example__heading">filled-alternative (default)</p>
            <CodeBlock language="tsx" code={appearanceSample}/>
          </div>

          <div className="code-block-appearance-example__filled-surface">
            <p className="code-block-appearance-example__heading">
              filled (on colorNeutralBackground3)
            </p>
            <CodeBlock language="tsx" appearance="filled" code={appearanceSample}/>
          </div>

          <div>
            <p className="code-block-appearance-example__heading">outline</p>
            <CodeBlock language="tsx" appearance="outline" code={appearanceSample}/>
          </div>

          <div>
            <p className="code-block-appearance-example__heading">subtle (no border, no padding)</p>
            <CodeBlock language="tsx" appearance="subtle" code={appearanceSample}/>
          </div>
        </div>
      </>);
};

export default Appearance;