import Link from "next/link";

import { RetainingButton } from "@/components/domains/retaining";
import { GPTAnimationText, Typography } from "@/components/ui";

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

interface AnimatedInfoScreenProps {
  lottieAnimation: React.ReactNode;
  title: string;
  animationTime?: number;
  animationTexts?: string[];
  buttonText?: string;
  nextRoute?: string;
}

export default async function AnimatedInfoScreen({
  lottieAnimation,
  title,
  animationTime,
  animationTexts,
  buttonText,
  nextRoute,
}: AnimatedInfoScreenProps) {
  return (
    <div className={styles.container}>
      {lottieAnimation}
      <Typography as="h1" weight="bold" className={styles.title}>
        {title}
      </Typography>
      {!!animationTexts?.length && animationTime && (
        <GPTAnimationText
          points={animationTexts}
          totalAnimationTime={animationTime}
        />
      )}
      {nextRoute && buttonText && (
        <Link
          className={styles.link}
          style={{ animationDelay: `${animationTime}ms` }}
          href={nextRoute}
        >
          <RetainingButton className={styles.button} active={true}>
            {buttonText}
          </RetainingButton>
        </Link>
      )}
    </div>
  );
}
