import '../../styles/styles.css'
import '../player/player.css'
import './photoComponent.css'
import photo1 from './Photo1.png'
import photo2 from './Photo2.png'
import { Content } from '../content/content'
import { useState } from 'react'



export const PhotoComponent: React.FC<any> = ({ text }) => {
    const [captionSmall, setCaptionSmall] = useState(true);

    return (
        <div className="photo___container">
            <Content captionSmall={captionSmall} text={text}></Content>
            <div className='photo__container_grid'>
                <img alt='photoImg' data-aos="fade-up" data-aos-delay="100" src={photo1} className='photo__container_image'></img>
                <img alt='photoImg' data-aos="fade-up" data-aos-delay="200" src={photo2} className='photo__container_image'></img>

            </div>
            <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
                {text.mainBlockSubblock}
            </div>

        </div>

    )
}