import Link from "next/link";

import GPTAnimationText from "@/components/ui/GPTAnimationText/GPTAnimationText";
import Typography from "@/components/ui/Typography/Typography";
import { ActionButton } from "@/components/ui/ActionButton/ActionButton";

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="w-full flex flex-col items-center px-7">
      {lottieAnimation}
      <Typography
        as="h1"
        weight="bold"
        className="mt-8 mb-[50px] text-[27px] leading-[40px] text-center"
      >
        {title}
      </Typography>
      {!!animationTexts?.length && animationTime && (
        <GPTAnimationText
          points={animationTexts}
          totalAnimationTime={animationTime}
        />
      )}
      {nextRoute && buttonText && (
        <ActionButton
          asChild
          className="w-full mt-[126px] sticky bottom-[calc(0dvh+16px)] opacity-0 [animation:fadeIn_0.5s_ease-in-out_forwards] pointer-events-none"
          style={
            animationTime ? { animationDelay: `${animationTime}ms` } : undefined
          }
        >
          <Link href={nextRoute}>{buttonText}</Link>
        </ActionButton>
      )}
    </div>
  );
}
