import { IconX } from '@tabler/icons-solidjs'
import { Dynamic, Portal } from 'solid-js/web'

export default function Popup(props) {
  return (
    <Portal mount={document.getElementById('modal-portal')}>
      <div class="modal" classList={{ 'modal-open': props.openModal }}>
        <div class={`modal-box ${props.class || ''}`}>
          <button
            type="button"
            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
            onClick={() => props.onModalClose()}
          >
            <IconX size={18} />
          </button>
          <h3
            class={`flex jutify-center items-center gap-2 text-lg font-bold ${props.titleClass || ''}`}
          >
            <Dynamic component={props.icon} />
            {props.title}
          </h3>
          {props.children}
        </div>
      </div>
    </Portal>
  )
}
