"use client";

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

type Props = {
  isOpen: boolean;
  onNo: () => void;
  onYes: () => void;
};

export default function PostLocationNoticeModal({ isOpen, onNo, onYes }: Props) {
  const router = useRouter();
  const { t } = useTranslation("common");

  return (
    <Modal
      isOpen={isOpen}
      onClose={onNo}
      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.locationNoticeBody")}
      </p>
      <p className="mt-3 text-center text-xs leading-relaxed text-neutral-500">
        {t("posts.locationNoticeHint")}
      </p>
      <div className="mt-5 flex gap-2">
        <RoundedButton
          type="button"
          variant="secondary"
          className="h-10 flex-1 text-sm"
          onClick={onNo}
        >
          {t("posts.no")}
        </RoundedButton>
        <RoundedButton
          type="button"
          variant="primary"
          className="h-10 flex-1 text-sm"
          onClick={() => {
            onYes();
            router.push("/settings/profile/user-settings");
          }}
        >
          {t("posts.yes")}
        </RoundedButton>
      </div>
    </Modal>
  );
}
