import React from 'react';
import { Favorite } from '@mui/icons-material';

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

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

function IconButtonSection() {
  return (
    <Playground
      title="IconButton"
      initialState={[
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'neutral',
        },
        {
          type: 'checkbox',
          stateId: 'readOnly',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          onClick: () => null,
        };
        const propsString = getPropsString({
          ...props,
        });

        const importsList = getImportsString([[['IconButton']], [['Favorite'], '@mui/icons-material']]);

        return {
          component: (
            <IconButton {...props}>
              <Favorite />
            </IconButton>
          ),
          code: `${importsList}
<IconButton${propsString}>
    <Favorite />
</IconButton>`,
        };
      }}
    />
  );
}

export default IconButtonSection;
