"use client";

import { useEffect, useState } from "react";

export function WaitClient({
  code,
  seconds,
  isFile,
  messages,
  dir = "rtl",
}: {
  code: string;
  seconds: number;
  isFile: boolean;
  dir?: "rtl" | "ltr";
  messages: {
    pleaseWait: string;
    redirecting: string;
    downloading: string;
    continue: string;
    seconds: string;
    sponsored: string;
  };
}) {
  const [left, setLeft] = useState(seconds);
  useEffect(() => {
    if (left <= 0) return;
    const id = setTimeout(() => setLeft((v) => v - 1), 1000);
    return () => clearTimeout(id);
  }, [left]);

  return (
    <div className="mx-auto flex min-h-full max-w-lg flex-col justify-center space-y-6 p-5 text-center sm:p-8" dir={dir}>
      <p className="text-lg font-bold tracking-tight">
        Earn<span className="text-brand">vato</span>
      </p>
      <h1 className="page-title">{messages.pleaseWait}</h1>
      <p className="text-muted">{isFile ? messages.downloading : messages.redirecting}</p>
      <div className="card p-8">
        <p className="text-6xl font-extrabold tabular-nums text-brand">{left}</p>
        <p className="mt-2 text-sm text-muted">{messages.seconds}</p>
      </div>
      <div className="rounded-2xl border border-dashed border-gold/50 bg-gold/10 p-6 text-sm leading-6 text-muted sm:p-8">
        {messages.sponsored}
      </div>
      <a
        href={`/api/go/${code}`}
        className={`btn-primary w-full ${left > 0 ? "pointer-events-none bg-gray-400 shadow-none" : ""}`}
      >
        {messages.continue}
      </a>
    </div>
  );
}