import { ArrowRight, Camera } from 'lucide-react';
import React, { useRef, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { Button } from './ui/Button';
import { useTranslation } from '../i18n/useTranslation';
import { FaceRecognitionProps, RegistrationStep,  } from '../types';




interface frameProps  extends FaceRecognitionProps{
    setStep: (stap:RegistrationStep) => void;
}

export const IntroFrame: React.FC<frameProps> = ({setStep, lang}) => {

  const describ = useTranslation(lang)

    return(
        <div className="text-center px-4">
            <div className="mb-6">
              <Camera className="w-16 h-16 mx-auto text-indigo-600" />
            </div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">{describ.guideTitle}</h2>
            <p className="text-gray-600 mb-6">
              {describ.guideDescription}
            </p>
            <div className="space-y-4">
              {describ.guideSteps.map((info, index)=> (
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                    <span className="text-indigo-600 font-medium">{index + 1}</span>
                  </div>
                  <p className="text-left text-gray-700">{info}</p>
                </div>
              ))}
              
            </div>
            <Button 
              className="mt-8" 
              onClick={() => setStep('setup')}
            >
              {describ.guideButton} <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
          </div>
    )
}