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

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

import Playground from '../Playground/Playground';
import { Badge, Stack } from '@/mui/components';

function BadgeSection() {
  return (
    <Playground
      title="Badge"
      initialState={[
        {
          type: 'select',
          stateId: 'variant',
          options: ['dot', 'standard'],
          selected: 'standard',
        },
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'primary',
        },
        {
          type: 'checkbox',
          stateId: 'showZero',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
        };

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

        return {
          component: (
            <Stack spacing={4} direction="row">
              <Badge badgeContent={100} {...props}>
                <Email fontSize="large" />
              </Badge>
              <Badge badgeContent={0} {...props}>
                <Email fontSize="large" />
              </Badge>
            </Stack>
          ),
          code: `${importsList}
<Badge${getPropsString(props)}>
  <Email fontSize="large" />
</Badge>`,
        };
      }}
    />
  );
}

export default BadgeSection;
