import React from "react";
import * as AlertDialog from "@radix-ui/react-alert-dialog";

import "./index.scss";
import Button from "~components/Button";
import { ButtonType } from "~utils/enums";

// Props
interface Props {
  open: boolean;
  title?: string;
  message: string;
  primaryAction?: () => void;
  primaryActionText?: string;
  cancelAction: () => void;
  cancelActionText: string;
}

const Alert = (props: Props) => {
  return (
    <AlertDialog.Root open={props.open}>
      <AlertDialog.Portal>
        <AlertDialog.Overlay className="Overlay" onClick={props.cancelAction} />
        <div className="AlertWrapper">
          <AlertDialog.Content className="Alert">
            {props.title ? <AlertDialog.Title>Error</AlertDialog.Title> : ""}
            <AlertDialog.Description className="description">
              {props.message}
            </AlertDialog.Description>
            <div className="buttons">
              <AlertDialog.Cancel asChild>
                <Button onClick={props.cancelAction}>
                  {props.cancelActionText}
                </Button>
              </AlertDialog.Cancel>
              {props.primaryAction ? (
                <AlertDialog.Action onClick={props.primaryAction}>
                  {props.primaryActionText}
                </AlertDialog.Action>
              ) : (
                ""
              )}
            </div>
          </AlertDialog.Content>
        </div>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
};

export default Alert;