"use client";

import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
} from "@material-tailwind/react";
import React from "react";

import SessionIcon from "../../public/img/session-expired.png";
import { _useScopedI18n } from "../i18n/client";
import ButtonCustom from "./Button";
import CustomNextImage from "./CustomNextImage";

export type SessionDialogComponentProps = {
  isExpired: boolean;
  callBackFn?: () => void;
};

export function SessionDialogComponent({
  isExpired,
  callBackFn,
}: SessionDialogComponentProps) {
  //
  const scopeT = _useScopedI18n("sharedComponents.sessionDialogComponent");

  return (
    <>
      <Dialog
        open={isExpired}
        handler={callBackFn}
        size="xs"
        className="md:!max-w-[450px] md:!min-w-[450px] py-8 md:py-4 px-0 md:p-7  flex flex-col items-center justify-center"
        style={{ zIndex: "99999999 !important" }}
      >
        <></>
        <CustomNextImage
          src={SessionIcon.src}
          alt="SessionIcon"
          width={80}
          height={80}
        />
        <DialogHeader className="text-lg  font-semibold text-black-500 pb-0 text-center">
          {" "}
          {scopeT("header")}{" "}
        </DialogHeader>
        <div className="w-24 h-1 mx-auto rounded-full header-underline mt-2"></div>
        <DialogBody className="text-sm text-slate-400 font-medium text-center">
          {scopeT("message")}
        </DialogBody>
        <DialogFooter className="pb-0">
          <ButtonCustom icon={undefined} onClick={callBackFn}>
            {scopeT("redirectBtn")}
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
