"use client";

import { useEffect } from "react";
import { useTranslations } from "next-intl";

import { Spinner, Typography } from "@/components/ui";
import { useGenerationPolling } from "@/hooks/generation/useGenerationPolling";
import { useToast } from "@/providers/toast-provider";

import styles from "./PalmistryResultPage.module.scss";

interface PalmistryResultPageProps {
  id: string;
}

export default function PalmistryResultPage({ id }: PalmistryResultPageProps) {
  const t = useTranslations("PalmistryResult");
  const { data, error, isLoading } = useGenerationPolling(id);
  const { addToast } = useToast();

  useEffect(() => {
    if (error) {
      addToast({
        variant: "error",
        message: t("error"),
        duration: 5000,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [error]);

  if (isLoading) {
    return (
      <div className={styles.loadingContainer}>
        <Spinner />
      </div>
    );
  }

  return (
    <>
      <Typography as="p" size="lg" align="left" className={styles.description}>
        {data?.result}
      </Typography>
    </>
  );
}
