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

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

const appearances = ['secondary', 'primary', 'outline', 'subtle', 'transparent'] as const;

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

    .link-button-disabled-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .link-button-disabled-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="link-button-disabled-example">
        {appearances.map((appearance) => (<div key={appearance} className="link-button-disabled-example__column">
            <p className="link-button-disabled-example__heading">{appearance}</p>
            <LinkButton appearance={appearance} disabled href="https://example.com">
              Visit site
            </LinkButton>
          </div>))}
      </div>
    </>);
};

export default Disabled;