import { Button } from "@/components/Button";

export interface Props {
  title?: string;
  message: string;
  chainType?: string;
  approve: VoidFunction;
  reject: VoidFunction;
  approveBtnStatus: "normal" | "loading" | "success";
}

const SignMessageUI = ({
  title,
  message,
  approve,
  reject,
  approveBtnStatus,
}: Props) => {
  return (
    <div
      className={`uikit-flex uikit-h-full uikit-flex-1 uikit-flex-col uikit-justify-between uikit-px-[16px] uikit-py-[20px] uikit-font-switzer uikit-overflow-hidden uikit-bg-bg1`}
    >
      <p className="uikit-text-[20px] uikit-font-bold uikit-leading-[1.3] uikit-text-t1">
        {title || "Sign Message"}
      </p>

      <div
        className={
          "uikit-mb-[40px] uikit-mt-[20px] uikit-w-full uikit-rounded-[12px] uikit-bg-bg3 uikit-py-[8px]"
        }
      >
        <div className="uikit-max-h-[300px] uikit-min-h-[150px] uikit-overflow-auto uikit-whitespace-pre-wrap uikit-break-words uikit-px-[20px] uikit-py-[12px] uikit-text-sm uikit-text-t1">
          {message || ""}
        </div>
      </div>

      <div
        className={`uikit-grid uikit-w-full uikit-flex-1 uikit-grid-cols-2 uikit-items-end uikit-gap-5`}
      >
        <Button size="large" block onClick={reject} theme="ghost">
          Reject
        </Button>
        <Button
          size="large"
          className="w-full"
          onClick={approveBtnStatus === "normal" ? approve : () => {}}
          status={approveBtnStatus}
          disabled={!message}
        >
          Approve
        </Button>
      </div>
    </div>
  );
};

export default SignMessageUI;