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

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

export const Loading = () => {
    const styles = /* css */ `
      .code-block-loading-example__skeleton {
        display: flex;
        flex-direction: column;
        gap: var(--spacingVerticalS);
      }

      .code-block-loading-example__line--one {
        width: 42%;
      }

      .code-block-loading-example__line--two {
        width: 68%;
      }

      .code-block-loading-example__line--three {
        width: 56%;
      }

      .code-block-loading-example__line--four {
        width: 76%;
      }

      .code-block-loading-example__line--five {
        width: 48%;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CodeBlock header="Loading Code..." headerAppearance="subtle" fallbackContent={<Skeleton className="code-block-loading-example__skeleton" aria-label="Loading code">
              <SkeletonItem className="code-block-loading-example__line--one" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--two" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--three" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--four" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--five" size={16}/>
            </Skeleton>}/>
      </>);
};

export default Loading;