import { Link, useRouter } from "@/shared/config/navigation";
import "./ReportMessage.scss";
import Image from "next/image";
import close from "./icons/close.svg";
import check from "./icons/check.svg";
import { useEffect } from "react";

interface IReportMessageProps {
  setShowMessage: (value: boolean) => void;
  showMessage: boolean;
}

const ReportMessage: React.FC<IReportMessageProps> = ({
  setShowMessage,
  showMessage,
}: IReportMessageProps) => {
  const router = useRouter();
  useEffect(() => {
    if (showMessage) {
      setTimeout(() => {
        setShowMessage(false);
        router.push("/");
      }, 5000);
    }
  }, [showMessage]);
  return (
    <div
      onClick={() => setShowMessage(false)}
      className="report-message"
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="report-message__wrapper"
      >
        <div className="report-message__header">
          <Image src={check} alt="Check Icon" />
          <button onClick={() => setShowMessage(false)} type="button">
            <Image src={close} alt="Close Icon" />
          </button>
        </div>
        <div className="report-message__text">
          <h4>Ваше обращение отправлено</h4>
          <p>
            Спасибо за ваше обращение. На данный момент оно в
            модерации.
          </p>
        </div>
        <Link href="/profile/my-reports">Смотреть мои обращения</Link>
      </div>
    </div>
  );
};

export default ReportMessage;