import { View } from 'react-native'

import { MenuButton } from './MenuButton'
import { SelectorModal } from './SelectorModal'

export interface ContextMenuItem {
  id: string
  label: string
  icon?: JSX.Element
  onPress: () => void
}

export const ContextMenuModal: React.FC<{
  title?: string
  menuItems: ContextMenuItem[]
  isOpen: boolean
  setIsOpen: (isOpen: boolean) => void
}> = ({ title, menuItems, isOpen, setIsOpen }) => (
  <SelectorModal<ContextMenuItem>
    title={title}
    items={menuItems}
    renderItem={({ item }) => (
      <View style={{ marginBottom: 8 }}>
        <MenuButton onPress={item.onPress} icon={item.icon}>
          {item.label}
        </MenuButton>
      </View>
    )}
    keyExtractor={(item) => item.id}
    modalIsOpen={isOpen}
    setModalIsOpen={setIsOpen}
    contentStyle={{ paddingBottom: 48 }}
  />
)