"use client";

import Modal from "@/components/elements/Modal";
import RoundedButton from "@/components/elements/RoundedButton";
import { buildExpertiseEditUrl } from "@/lib/postExpertise";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";

type Props = {
  isOpen: boolean;
  onClose: () => void;
  returnPath?: string;
};

export default function PostExpertiseRequiredModal({
  isOpen,
  onClose,
  returnPath = "/new-post",
}: Props) {
  const router = useRouter();
  const { t } = useTranslation("common");

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      height="fit"
      panelClassName="!p-5 max-w-sm"
    >
      <p className="text-center text-sm font-bold leading-relaxed text-neutral-900 dark:text-white">
        {t("posts.expertiseRequired")}
      </p>
      <div className="mt-5">
        <RoundedButton
          type="button"
          variant="primary"
          className="h-10 w-full text-sm"
          onClick={() => {
            onClose();
            router.push(buildExpertiseEditUrl(returnPath));
          }}
        >
          {t("posts.confirm")}
        </RoundedButton>
      </div>
    </Modal>
  );
}
