"use client";

import { useTranslations } from "next-intl";

import { Spinner, Toast, Typography } from "@/components/ui";
import { useGenerationPolling } from "@/hooks/generation/useGenerationPolling";

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);

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

  if (error) {
    return <Toast variant="error">{t("error")}</Toast>;
  }

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