import React from 'react'
import { Container,Row,Col} from 'reactstrap';
import {Youtubedetails} from '../data/Youtubedetails.js';

const Youtube = () => {
    return (
        <Container>
            {Youtubedetails.map((content)=> 
            (       
            <div key={content.id}>
            { content.id %2 !==0 && 
            <Row className="justify-content-center align-items-center" style={{margin:"0px auto",paddingTop:"50px",minHeight:"200px"}}>
            <Col  xs="12" lg="4" >
            <iframe className=" round-border"  src={content.link} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </Col>
            
            <Col xs="12" lg="7" style={{padding:"15px"}}>
                <div className=" text-left ">
                <h4 className="orange">{content.title}</h4>
                <p>{content.description}</p>
                <hr className="d-none d-lg-block mb-0 ms-0"></hr>
                </div>
            </Col>
            </Row>}
            { content.id %2 ===0 && 
            <Row className="justify-content-center align-items-center" style={{margin:"0px auto",paddingTop:"50px",minHeight:"200px"}}>
            <Col  xs="12" lg="4" className="order-lg-last">
            <iframe className=" round-border"  src={content.link} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </Col>
            
            <Col xs="12" lg="8" style={{padding:"15px"}} >
                <h4 className="orange ">{content.title}</h4>
                <p>{content.description}</p>
                <hr className="d-none d-lg-block mb-0 ms-0"></hr>
            </Col>
            </Row>}
                </div>
                    ))}
        </Container>
  
    )
}

export default Youtube