import React, { ReactNode } from 'react';
import * as Dialog from '@radix-ui/react-dialog';

interface ModalProps {
  /** icon to open the modal */
  icon: ReactNode;
  /** Title of the modal, will be shown on header */
  title: ReactNode;
  /** cross icon to close the modal */
  closeIcon: ReactNode;
  /** content of the modal */
  content: ReactNode;
  /** Footer elements of the modal */
  footerContent: ReactNode;
  /** Footer content of the modal which leads to closing the modal */
  onCloseContent: ReactNode;
}

export const Modal = (props: ModalProps) => {
  const { icon, title, closeIcon, content, footerContent, onCloseContent } = props
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        {icon}
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="DialogOverlay" />
        <Dialog.Content className="DialogContent">
          <div className='fr-header'>
            <h2 className='fr-ml-4 fr-mr-auto fr-text-xl'>{title}</h2>
            <Dialog.Close asChild>
              <div aria-label="Close" className='fr-close-icon'>
                {closeIcon}
              </div>
            </Dialog.Close>
          </div>
          <div className='scrollbar fr-overflow-y'>
            {content}
          </div>
          <div className="fr-footer">
            <div className='fr-footer-content'>
              {footerContent}
              <Dialog.Close asChild>
                {onCloseContent}
              </Dialog.Close>
            </div>
        </div>
      </Dialog.Content>
    </Dialog.Portal>
    </Dialog.Root >
  )
}