import * as React from 'react';
import {SFC, HTMLProps} from 'react';
import {Button, Img, Modal, ModalBody, ModalFooter} from './';

export interface ImgModalProps extends HTMLProps<HTMLImageElement> {
  modalOpen: boolean;
  toggleModal?: () => void;
}

export const ImgModal: SFC<ImgModalProps> = (props) => (
    <Modal
      className="img-modal"
      isOpen={props.modalOpen}
      toggle={props.toggleModal}
    >
      <ModalBody>
        <Img src={props.src} alt={props.alt} />
      </ModalBody>

      <ModalFooter>
        <Button
          color="link"
          size="lg"
          onClick={props.toggleModal}
        >
          Close
        </Button>
      </ModalFooter>
    </Modal>
);

ImgModal.displayName = 'ImgModal';

ImgModal.defaultProps = {
  toggleModal: () => { return; },
};