components/quizz/index.tsx

"use client";
import { useState } from "react";
import { useBoolean, useInterval, useUpdateEffect } from "react-use";
import { RxLapTimer } from "react-icons/rx";

import { useQuizz } from "./hooks/useQuizz";
import { PromptType } from "@/utils/type";
import { Card } from "./card";
import { Button } from "../button/button";
import Link from "next/link";

export const QuizzContent = () => {
  const { loading, prompts, question, onScore, result, score } = useQuizz();
  const [counter, setCounter] = useState(10);
  const [isRunning, toggleIsRunning] = useBoolean(true);

  useUpdateEffect(() => {
    if (!counter) {
      (async () => {
        await onScore();
        return;
      })();
    }
  }, [counter]);

  useInterval(
    () => {
      if (counter > 0) {
        setCounter(counter - 1);
      }
    },
    isRunning ? 1000 : null
  );

  const handleScore = async (id: string) => {
    toggleIsRunning(false);
    await onScore(id);
  };

  useUpdateEffect(() => {
    if (typeof score !== "number") return;
    toggleIsRunning(true);
    const delay = score > 10 ? 5 : score > 5 ? 8 : 10;
    setCounter(delay);
  }, [question]);

  return (
    <div className="flex flex-col items-center justify-center gap-10 lg:gap-12">
      {!loading && (
        <p className="font-extrabold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80 text-2xl lg:text-4xl text-center lg:!leading-snug relative">
          <span className="font-action text-4xl lg:text-7xl !leading-3 text-white translate-y-2 lg:translate-y-4 inline-block pr-2">
            “
          </span>
          {question}
          <span className="font-action text-4xl lg:text-7xl text-white !leading-3 relative translate-y-5 lg:translate-y-12 pl-2 inline-block">
            ”
          </span>
        </p>
      )}
      <div className="grid grid-cols-1 gap-4 lg:gap-12">
        <p className="text-white font-normal text-lg lg:text-2xl text-center mb-5 lg:mb-0">
          Guess which image is related to the prompt above
        </p>
        <p className="text-white text-center text-3xl font-extrabold max-w-max mx-auto flex items-center justify-between gap-4 relative">
          <RxLapTimer className="inline-block mb-4 lg:mb-2 text-3xl lg:text-4xl" />
          {counter}
        </p>
        <div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-center gap-0 lg:gap-16">
          {loading
            ? Array.from({ length: 3 }).map((_, i: number) => (
                <div
                  key={i}
                  className="w-full lg:w-[340px] h-[340px] animate-pulse bg-gradient-to-br from-black/30 to-white/5 rounded-lg"
                />
              ))
            : prompts?.map((prompt: PromptType, i: number) => (
                <Card prompt={prompt} key={i} onScore={handleScore} />
              ))}
        </div>
      </div>
      {result && !result?.success && (
        <Link href="/results">
          <Button>Go to results</Button>
        </Link>
      )}
    </div>
  );
};