/**
 * @format
 */
import {Box, MenuButton, MenuList, MenuOptionGroup, MenuItemOption, Menu, IconButton} from '@chakra-ui/react'
import React, {FC} from 'react'
import {MoreVertical} from 'react-feather'

interface DropDownActionItem {
  itemDesc: string
  itemAcion: (...args: any) => void
}

type ActionsDropDownProps = {
  actions: Array<DropDownActionItem>
}

export const ActionsDropDown: FC<ActionsDropDownProps> = ({actions}) => (
  <Box fontSize={'14px'}>
    <Menu>
      {({isOpen}) => (
        <>
          <MenuButton
            variant={'moreMenu'}
            isActive={isOpen}
            as={IconButton}
            icon={<MoreVertical />}
            aria-label={'Options'}
          />
          <MenuList>
            <MenuOptionGroup>
              {actions.map((option, index) => (
                <MenuItemOption key={index} icon={null} onClick={() => option.itemAcion()}>
                  {option.itemDesc}
                </MenuItemOption>
              ))}
            </MenuOptionGroup>
          </MenuList>
        </>
      )}
    </Menu>
  </Box>
)