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

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

import Playground from '../Playground/Playground';
import { BottomNavigation, BottomNavigationAction } from '@/mui/components';

function BottomNavigationSection() {
  const [value, setValue] = React.useState(0);

  return (
    <Playground
      title="BottomNavigation"
      initialState={[
        {
          type: 'checkbox',
          stateId: 'showLabels',
          selected: true,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          value,
          onChange: (event, newValue) => {
            setValue(newValue);
          },
        };

        const importsList = getImportsString([
          [['BottomNavigation', 'BottomNavigationAction']],
          [['Restore', 'Favorite', 'LocationOn'], '@mui/icons-material'],
        ]);

        return {
          component: (
            <BottomNavigation {...props}>
              <BottomNavigationAction label="Recents" icon={<Restore />} />
              <BottomNavigationAction label="Favorites" icon={<Favorite />} />
              <BottomNavigationAction label="Nearby" icon={<LocationOn />} />
            </BottomNavigation>
          ),
          code: `${importsList}
<BottomNavigation${getPropsString(props)}>
  <BottomNavigationAction label="Recents" icon={<Restore />} />
  <BottomNavigationAction label="Favorites" icon={<Favorite />} />
  <BottomNavigationAction label="Nearby" icon={<LocationOn />} />
</BottomNavigation>`,
        };
      }}
    />
  );
}

export default BottomNavigationSection;
