import React, { useState } from 'react';
import { Logout, Person, Send } from '@mui/icons-material';

import Playground from '../Playground/Playground';
import { Button, Menu, MenuItem } from '@/mui/components';

function MenuSection() {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  return (
    <Playground
      title="Menu"
      initialState={[]}
      renderCallback={() => ({
        component: (
          <>
            <Button onClick={(event) => setAnchorEl(event.currentTarget)}>Dashboard Menu</Button>
            <Menu anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)}>
              <MenuItem onClick={() => setAnchorEl(null)}>
                <Person />
                Profile
              </MenuItem>
              <MenuItem onClick={() => setAnchorEl(null)}>
                <Send />
                Settings
              </MenuItem>
              <MenuItem onClick={() => setAnchorEl(null)}>
                <Logout />
                Logout
              </MenuItem>
            </Menu>
          </>
        ),
        code: `
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  
  <>
    <Button onClick={(event) => setAnchorEl(event.currentTarget)}>
      Dashboard
    </Button>
    <Menu
      anchorEl={anchorEl}
      open={open}
      onClose={() => setAnchorEl(null)}
    >
      <MenuItem onClick={() => setAnchorEl(null)}>
        <Person />
        Profile
      </MenuItem>
      <MenuItem onClick={() => setAnchorEl(null)}>
        <Send />
        My account
      </MenuItem>
      <MenuItem onClick={() => setAnchorEl(null)}>
        <Logout />
        Logout
      </MenuItem>
    </Menu>
  </>`,
      })}
    />
  );
}

export default MenuSection;
