import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {VideoPage as VideoPageData} from '../../data.json'

const VideoPage = () => {
    const [isPlaying, setIsPlaying] = useState(false);
    const [t] = useTranslation();


    const handlePlayPause = () => {
        setIsPlaying(!isPlaying);
    };

    return (
        <div className='VideoPage'>
                
               <img src="/Video/video.png" alt="" />
                
                <main>
                    <h1>{VideoPageData.title}</h1>
                    <p>
                        {VideoPageData.description}
                    </p>
                   <img src={VideoPageData.mainImage} alt="" />
                </main>

            <span>
                {Object.entries(VideoPageData.Data).map((item, index) => (
                    <article key={index}>
                        <img src={`/Video/${item[1].img}.png`} alt={`${index}`} />
                        
                            <h4>{t(item[1].number)}</h4>
                            <p>{t(item[1].title)}</p>
                       
                    </article>
                ))}
            </span> 
           
        </div>
    );
};

export default VideoPage;