import React from 'react';

import { colorList, getImportsString, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { CircularProgress, LinearProgress } from '@/mui/components';

function ProgressSection() {
  return (
    <>
      <Playground
        title="LinearProgress"
        initialState={[
          {
            type: 'select',
            stateId: 'color',
            options: colorList,
            selected: 'primary',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
          };

          const importsList = getImportsString([[['LinearProgress']]]);

          return {
            component: <LinearProgress {...props} />,
            code: `${importsList}\n<LinearProgress${getPropsString(props)}/>`,
          };
        }}
      />
      <Playground
        title="CircularProgress"
        initialState={[
          {
            type: 'select',
            stateId: 'color',
            options: [...colorList, 'inherit'],
            selected: 'primary',
          },
          {
            type: 'select',
            stateId: 'size',
            options: [
              'x5Small',
              'x4Small',
              'x3Small',
              'x2Small',
              'xSmall',
              'small',
              'medium',
              'large',
              'xLarge',
              'x2Large',
              'x3Large',
              'x4Large',
              'x5Large',
              'x6Large',
              'x7Large',
              'x8Large',
              'x9Large',
            ],
            selected: 'medium',
          },
        ]}
        renderCallback={(state) => {
          const props = {
            ...state,
          };

          const importsList = getImportsString([[['CircularProgress']]]);

          return {
            component: <CircularProgress {...props} />,
            code: `${importsList}\n<CircularProgress${getPropsString(props)}/>`,
          };
        }}
      />
    </>
  );
}

export default ProgressSection;
