import clsx from "clsx";
import { ReactNode, useState } from "react";
import Modal from "../modals/Modal";
import ModalOrSlide from "../modals/ModalOrSlide";
import { Button, buttonVariants } from "../button";

interface Props {
  title: ReactNode;
  children?: ReactNode;
  className?: string;
  type?: "dialog" | "modal";
  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
  buttons?: ReactNode;
  dialogTitle?: string;
  disabled?: boolean;
  buttonProps?: {
    variant?: "default" | "outline";
    size?: "icon" | "xs" | "sm" | "default" | "lg";
  };
}
export default function ShowModalButton({
  title,
  children,
  className = "sm:max-w-md",
  type = "modal",
  size = "lg",
  buttons,
  dialogTitle,
  disabled,
  buttonProps,
}: Props) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="flex space-x-2">
        {buttonProps !== undefined ? (
          <Button
            {...buttonProps}
            disabled={!children || disabled}
            onClick={(e) => {
              e.stopPropagation();

              setOpen(true);
            }}
          >
            {title}
          </Button>
        ) : (
          <button
            type="button"
            disabled={!children || disabled}
            onClick={(e) => {
              e.stopPropagation();

              setOpen(true);
            }}
            className={clsx(!!children)}
          >
            {title}
          </button>
        )}
      </div>

      <ModalOrSlide title={dialogTitle || title} type={type} size={size} open={open} setOpen={setOpen} buttons={buttons}>
        {children}
      </ModalOrSlide>
    </>
  );
}