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

import { CopyButton } from "@coreai-ds/react-components";

export const Default = () => {
    const styles = /* css */ `
      .copy-button-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        align-items: flex-start;
        padding: var(--spacingVerticalL);
      }

      .copy-button-example__row {
        display: flex;
        align-items: center;
        column-gap: var(--spacingHorizontalS);
      }

      .copy-button-example__heading {
        margin: 0;
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }

      .copy-button-example__code {
        font-family: var(--fontFamilyMonospace);
        font-size: var(--fontSizeBase300);
        color: var(--colorNeutralForeground1);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="copy-button-example">
          <div className="copy-button-example__row">
            <p className="copy-button-example__heading">icon only</p>
            <CopyButton aria-label="Copy value" contentToCopy="Hello from CoreAI"/>
          </div>

          <div className="copy-button-example__row">
            <code className="copy-button-example__code">npm i @coreai-ds/react-components</code>
            <CopyButton aria-label="Copy install command" contentToCopy="npm i @coreai-ds/react-components"/>
          </div>

          <div className="copy-button-example__row">
            <p className="copy-button-example__heading">with text</p>
            <CopyButton aria-label="Copy value" contentToCopy="Hello from CoreAI">
              Copy
            </CopyButton>
          </div>
        </div>
      </>);
};

export default Default;