import { useModal } from 'components/layers';

import { FlyoutMenu } from 'components/FlyoutMenu';
import { DeleteCollectionModal } from 'components/alliance/modals';

interface AllianceCollectionMenuProps {
  allianceId: string;
  collectionId: string;
  onDismiss?: () => void;
}

export const AllianceCollectionMenu = ({
  allianceId,
  collectionId,
  onDismiss,
}: AllianceCollectionMenuProps) => {
  const deleteCollectionModal = useModal(DeleteCollectionModal, {
    defaultProps: { allianceId: allianceId, collectionId: collectionId },
  });

  return (
    <FlyoutMenu
      style={{ marginTop: -24 }}
      options={[
        {
          label: 'Remove collection',
          value: 'remove',
          onClick: () => deleteCollectionModal.show(),
        },
      ]}
      onDismiss={onDismiss}
      key="AllianceItemMenu"
    />
  );
};