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

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

  const describ = useTranslation(lang)

  const [completedMovements, setCompletedMovements] = useState<HeadMovement[]>([]);
  const [currentMovement, setCurrentMovement] = useState<HeadMovement>('center');
  const [cameraError, setCameraError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [errorType, setErrorType] = useState<ErrorType>(null);

  

    return(
      <div className="text-center px-6">
            <div className="mb-6">
              <div className="w-16 h-16 rounded-full bg-red-100 mx-auto flex items-center justify-center">
                <XCircle className="w-10 h-10 text-red-500" />
              </div>
            </div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">{describ.errorTitle}</h2>
            <p className="text-gray-600 mb-8">
              {errorType === 'duplicate' 
                ? describ.errorTextDuplicate
                : describ.errorTextNormal}
            </p>
            <div className="space-x-4">
              <Button variant="secondary" onClick={onClose}>
                {describ.errorButtonCancel}
              </Button>
              <Button 
                onClick={() => {
                  setCompletedMovements([]);
                  setCurrentMovement('center');
                  setErrorType(null);
                  onTry && onTry()
                }}
              >
                {describ.errorTryButton}
              </Button>
            </div>
          </div>
    )
}