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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Skeleton } from "@coreai-ds/react-components";
import { SkeletonItem } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    wrapper: {
        display: 'flex',
        background: tokens.colorNeutralBackground1,
        flexDirection: 'column',
        padding: tokens.spacingHorizontalXL,
        gap: tokens.spacingVerticalL,
    },
    innerWrapper: {
        display: 'grid',
        alignItems: 'center',
        gridTemplateColumns: '25px 1fr',
        gridGap: tokens.spacingHorizontalS,
    },
});

const SIZES = [8, 12, 14, 16, 20, 22, 24, 28, 32, 36, 40, 48, 52, 56, 64, 72, 92, 96, 120, 128] as const;

export const Size = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.wrapper}>
      {SIZES.map(size => (<div key={size} className={styles.innerWrapper}>
          <Text align="center">{size}</Text>
          <Skeleton aria-label="Loading Content">
            <SkeletonItem size={size}/>
          </Skeleton>
        </div>))}
    </div>);
};

export default Size;