interface VideoGalleryProps {
    data: {
        heading: string;
        videoUrl: string;
        thumbnail: string;
    };
}

const VideoGallery = ({ data }: VideoGalleryProps) => {
    return (
        <section className="video-section bg-cover">
            <video autoPlay loop muted playsInline className="video-bg">
                <source src={data.videoUrl} type="video/mp4" />
            </video>
            <div className="text-image">
                <img src="/assets/img/home-1/feature/text.png" alt="img" />
            </div>
            <div className="text-image-2">
                <img src="/assets/img/home-1/feature/text-2.png" alt="img" />
            </div>
            <div className="container">
                <div className="video-content">
                    <div className="shape">
                        <img src="/assets/img/home-1/feature/Vector.png" alt="img" />
                    </div>
                    <h2 className="split-text-right split-text-in-right">{data.heading.split(' ').map((word, index) => (
                        <span key={index}>{word}{index === 0 ? <br /> : ' '}</span>
                    ))}</h2>
                </div>
            </div>
        </section>
    );
};

export default VideoGallery;