import { CheckCircle2 } from "lucide-react";
import { useTranslation } from "../i18n/useTranslation";
import { FaceRecognitionProps, RegistrationStep } from "../types";
import { Button } from "./ui/Button";

interface frameProps  extends FaceRecognitionProps{
    onClose?: () => void;
}
export const SuccessFrame: React.FC<frameProps> = ({lang, onClose}) => {

  const describ = useTranslation(lang)

    return(
      <div className="text-center px-6">
            <div className="mb-6">
              <div className="w-16 h-16 rounded-full bg-green-100 mx-auto flex items-center justify-center">
                <CheckCircle2 className="w-10 h-10 text-green-500" />
              </div>
            </div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">{describ.sucessTitle}</h2>
            <p className="text-gray-600 mb-8">
              {describ.sucessSubTitle}
            </p>
            <Button onClick={onClose}>
              {describ.errorButtonCancel}
            </Button>
          </div>
    )
}