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

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

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

export function Save(): JSX.Element {
  // Click to persist the current document.
  return <Button appearance="primary">Save</Button>;
}`;
    const cssSample = `.card {
  border-radius: 8px;
  padding: 16px;
  background: var(--colorNeutralBackground1);
}`;
    const styles = /* css */ `
      .code-block-default-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        max-width: 640px;
      }

      .code-block-default-example__heading {
        margin: 0;
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="code-block-default-example">
          <div>
            <p className="code-block-default-example__heading">TypeScript</p>
            <CodeBlock language="tsx" code={tsSample}/>
          </div>

          <div>
            <p className="code-block-default-example__heading">CSS</p>
            <CodeBlock language="css" code={cssSample}/>
          </div>

          <div>
            <p className="code-block-default-example__heading">Un-highlighted (no language)</p>
            <CodeBlock code={`SELECT * FROM users WHERE active = 1;`}/>
          </div>
        </div>
      </>);
};

export default Default;