import React, { useState } from 'react'

import { Dropdown, Button, Menu, MenuItem, MenuItemGroup } from 'react-icecream'
import { DownThinIcon } from 'react-icecream/icons'

export default function Demo() {
  const [visible, setVisible] = useState(false)
  const overlay = (
    <Menu>
      <MenuItemGroup title="Detail Operations">
        <MenuItem onClick={() => console.log('Detail A clicked.')}>Detail A</MenuItem>
        <MenuItem onClick={() => console.log('Detail B clicked.')}>Detail B</MenuItem>
        <MenuItem onClick={() => console.log('Detail C clicked.')}>Detail C</MenuItem>
      </MenuItemGroup>
      <MenuItemGroup title="Update Operations">
        <MenuItem onClick={() => console.log('Update A clicked.')}>Update A</MenuItem>
        <MenuItem onClick={() => console.log('Update B clicked.')}>Update B</MenuItem>
        <MenuItem onClick={() => console.log('Update C clicked.')}>Update C</MenuItem>
      </MenuItemGroup>
      <MenuItemGroup title="Dangerous Operations">
        <MenuItem onClick={() => console.log('Remove clicked.')}>Remove</MenuItem>
      </MenuItemGroup>
    </Menu>
  )
  return (
    <Dropdown overlay={overlay} trigger="click" visible={visible} onVisibleChange={setVisible}>
      <Button endIcon={<DownThinIcon />}>Operations With Group</Button>
    </Dropdown>
  )
}