import React from 'react';

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

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

function AlertSection() {
  return (
    <Playground
      title="Alert"
      initialState={[
        {
          type: 'select',
          stateId: 'severity',
          options: ['success', 'warning', 'error', 'info'],
          selected: 'error',
        },
        {
          type: 'select',
          stateId: 'variant',
          options: ['filled', 'outlined'],
          selected: 'filled',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'shape',
          options: shapes,
          selected: 'rounded',
        },
        {
          type: 'checkbox',
          stateId: 'onClose',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          onClose: state.onClose ? () => null : undefined,
        };

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

        const text = `This is an ${state.severity} alert`;

        return {
          component: <Alert {...props}>{text}</Alert>,
          code: `${importsList}
<Alert${getPropsString(props)}>
  ${text}
</Alert>`,
        };
      }}
    />
  );
}

export default AlertSection;
