import { Component, JSX, splitProps } from "solid-js";

const Modal: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <div
      class={`fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50 ${local.class || ""}`}
      {...others}
    />
  );
};

const ModalContent: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <div class={`bg-white rounded-lg shadow-xl w-full mx-4 ${local.class || ""}`} {...others} />;
};

export { Modal, ModalContent };