import {
  ButtonProps,
  IconButton,
  Menu,
  MenuButton,
  MenuList,
} from '@chakra-ui/react'
import { MoreVerticalIcon } from 'assets/icons'
import { ReactNode } from 'react'

type Props = { children: ReactNode } & ButtonProps

export const MoreButton = ({ children, ...props }: Props) => {
  return (
    <Menu>
      <MenuButton
        as={IconButton}
        icon={<MoreVerticalIcon />}
        onClick={(e) => e.stopPropagation()}
        colorScheme="blue"
        variant="ghost"
        size="lg"
        {...props}
      />
      <MenuList>{children}</MenuList>
    </Menu>
  )
}