"use client";

import React from "react";
import Link from "next/link";
import { CheckCircle, AlertCircle } from "lucide-react";
import Button from "@/components/ui/button/Button";
import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";

export default function VerifySuccessPage() {
  const searchParams = useSearchParams();
  const t = useTranslations("VerifyEmail");
  const verified = searchParams.get("verified");
  const alreadyVerified = searchParams.get("already_verified");

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 dark:bg-gray-900 sm:px-6 lg:px-8">
      <div className="w-full max-w-md space-y-8 text-center">
        <div>
          <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
            {verified || alreadyVerified ? (
                <CheckCircle className="h-10 w-10 text-green-600 dark:text-green-400" />
            ) : (
                <AlertCircle className="h-10 w-10 text-yellow-600 dark:text-yellow-400" />
            )}
          </div>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
            {alreadyVerified ? t("already_verified_title") : (verified ? t("success_title") : t("status_title"))}
          </h2>
          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
            {alreadyVerified 
                ? t("already_verified_desc") 
                : (verified 
                    ? t("success_desc")
                    : t("status_fail_desc"))
            }
          </p>
        </div>

        <div className="space-y-4">
          <Link href="/dashboard" className="block">
            <Button className="w-full">
              {t("go_dashboard")}
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}
