"use client";

import { useCallback, useEffect } from "react";
import { useRouter } from "next/navigation";

import { useFullScreenModal } from "@/providers/fullscreen-blur-modal-provider";
import { ROUTES } from "@/shared/constants/client-routes";

import { StartBreathModalChild } from "..";

interface MeditationPageProps {
  id: string;
  resultId: string;
}

export default function MeditationPage({ id, resultId }: MeditationPageProps) {
  const router = useRouter();
  const { openModal, closeModal } = useFullScreenModal();

  const handleBegin = useCallback(() => {
    router.push(ROUTES.meditationResult(id, resultId));
    closeModal();
  }, [closeModal, id, resultId, router]);

  useEffect(() => {
    openModal(<StartBreathModalChild handleBegin={handleBegin} />);
  }, [handleBegin, openModal]);

  return <></>;
}
