"use client";

import Modal from "@/components/Modal";
import Lottie from "lottie-react";
import invitationSentAnimation from "@/public/images/invitation-sent.json";
import { useTranslations } from "next-intl";

interface TherapistInvitationSentModalProps {
  isOpen: boolean;
  onClose: () => void;
  showEmailNotice?: boolean;
}

export default function TherapistInvitationSentModal({
  isOpen,
  onClose,
  showEmailNotice,
}: TherapistInvitationSentModalProps) {
  const t = useTranslations("practiceManager");
  const tAuth = useTranslations("auth");

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="md">
      <div className="p-8 py-12 flex flex-col items-center text-center">
        {/* Animated Success Icon */}
        <div className="mb-8">
          <Lottie
            animationData={invitationSentAnimation}
            loop={true}
            className="w-40 h-40"
          />
        </div>

        {/* Title */}
        <h2 className="text-2xl font-bold text-gray-900 mb-4">
          {t("modals.therapistInvitationSent.title")}
        </h2>

        {/* Description */}
        <p className="text-gray-500 text-lg max-w-md">
          {t("modals.therapistInvitationSent.description")}
        </p>

        {showEmailNotice && (
          <p className="mt-3 text-xs text-amber-600 max-w-md">
            <strong>{tAuth("note")}</strong> {tAuth("email_notice")}
          </p>
        )}
      </div>
    </Modal>
  );
}