import React from 'react';

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

import Playground from '../Playground/Playground';
import { Skeleton } from '@/mui/components';

function SkeletonSection() {
  return (
    <Playground
      title="Skeleton"
      initialState={[
        {
          type: 'select',
          stateId: 'variant',
          options: ['circular', 'rectangular', 'rounded', 'text'],
          selected: 'circular',
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
        };

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

        return {
          component: <Skeleton {...props} sx={{ width: '100px', height: '100px' }} />,
          code: `${importsList}\n<Skeleton${getPropsString(props)}/>`,
        };
      }}
    />
  );
}

export default SkeletonSection;
