"use client";
import Header from "../../../layout/components/Header";
import React from "react";
import { AlertCircle, Mail, PhoneCall } from "lucide-react";
import { useTranslation } from "react-i18next";

interface VerificationPendingProps {
  hasCompletedRegistration: boolean;
  contactNumber?: string;
  email?:string;

}

const VerificationPending: React.FC<VerificationPendingProps> = ({
  hasCompletedRegistration,
  contactNumber,
  email,
}) => {
  const { t } = useTranslation();

  if (hasCompletedRegistration) {
    return null; // ✅ Nothing to show if user has finished registration
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-primary-50 px-6">
      <Header />

      <div className="max-w-lg w-full bg-white rounded-2xl shadow-lg p-8 border border-primary-200">
        <div className="flex items-center gap-3 mb-4">
          <AlertCircle className="text-primary-600 w-6 h-6" />
          <h1 className="text-xl font-semibold text-primary-700">
            {t("verification.pending")}
          </h1>
        </div>

        <p className="text-gray-700 mb-4">
          {t("verification.message")}{" "}
          <span className="font-medium text-primary-700">
            <Mail/>{email} or <PhoneCall/>{contactNumber} </span>.
        </p>

        
      </div>
    </div>
  );
};

export default VerificationPending;
