import { useGlobal } from "@/context/global";
import { faExclamation } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button } from "../ui/button";

export default function Confirm({
  message,
  title,
  confirmLabel,
  cancelLabel,
  handleConfirm,
  handleCancel,
}: AppConfirmProps) {
  const { dict } = useGlobal();

  return (
    <>
      <div className="max-w-[400px] space-y-4 rounded bg-white p-4 shadow">
        <div className="space-y-4">
          <div className="mx-auto flex w-fit items-center gap-2">
            <p className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-yellow-500 text-2xl font-semibold text-yellow-500">
              <FontAwesomeIcon icon={faExclamation} />
            </p>
            <p className="text-xl">
              {title ?? dict.components.confirm_box.default_title}
            </p>
          </div>
          <hr />
          <div>
            {!message || typeof message === "string" ? (
              <p className="text-ellipsis text-center text-slate-500">
                {message ?? dict.components.confirm_box.default_text}
              </p>
            ) : (
              message
            )}
          </div>
        </div>
        <div className="flex justify-end gap-4">
          <Button variant="solid" color="danger" onClick={handleCancel}>
            {cancelLabel ?? dict.pages.general.cancel}
          </Button>
          <Button variant="solid" color="success" onClick={handleConfirm}>
            {confirmLabel ?? dict.pages.general.confirm}
          </Button>
        </div>
      </div>
    </>
  );
}