import { FunctionComponent } from "preact";
import Button from "./Button";

interface DialogProps {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
  title: string;
  onConfirm?: () => void;
  confirmText?: string;
  cancelText?: string;
  confirmation?: boolean;
}

const Dialog: FunctionComponent<DialogProps> = ({
  isOpen,
  setIsOpen,
  title,
  children,
  onConfirm = () => {},
  confirmText = "Подтвердить",
  cancelText = "Отмена",
  confirmation = true,
}) => {
  if (!isOpen) return null;

  return (
    <div class="fixed inset-0 z-150 flex items-center justify-center bg-black/50">
      <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
        <h2 class="mb-4 text-xl font-semibold">{title}</h2>
        {children}
        <div class="flex justify-end gap-4">
          {confirmation ? (
            <>
              <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
                {cancelText}
              </Button>
              <Button
                onClick={() => {
                  onConfirm();
                  setIsOpen(false);
                }}
                color="red"
              >
                {confirmText}
              </Button>
            </>
          ) : (
            <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
              {cancelText}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default Dialog;
