import "../../styles/styles.css";
import "./demonstration.css"
import building from './building.png'
import building1 from './building1.png'

import iconButton from "./iconButton.svg"


export const Demostration: React.FC<any> = ({text}) => {
    const { card, card1 } = text;

    return (
        <div className="block">
            <a href='https://stream.graff.tech/' target='_blank' rel="noreferrer" className='demos_container demos__route'>
                <div className="main-block__icon_container demo__icon">
                    <img alt="icon" src={iconButton} className="main-block__icon"></img>
                </div>
                <div className='demo'>
                <img alt='buildingImg' src={building} className='demo_image'></img>
                <div className='demo_info'>
                    <div className='title__block'>
                        <h4 className='title__demo'>{card.title}</h4>
                        <p className='caption'>{card.subTitle}</p>
                    </div>
                    <div className='body__block'>
                        <p className='caption1'>{card.caption}</p>
                        <p className='caption2'>{card.caption1}</p>
                    </div>
                </div>
            </div>
            </a>
            <a href='http://5.141.82.116:9888' target='_blank' rel="noreferrer" className='demos_container demos__route'>
                <div className="main-block__icon_container demo__icon">
                    <img alt="icon" src={iconButton} className="main-block__icon"></img>
                </div>
                <div className='demo'>
                <img alt='buildingImg' src={building1} className='demo_image'></img>
                <div className='demo_info'>
                    <div className='title__block'>
                        <h4 className='title__demo'>{card1.title}</h4>
                        <p className='caption'>{card1.subTitle}</p>
                    </div>
                    <div className='body__block'>
                        <p className='caption1'>{card1.caption}</p>
                        <p className='caption2'>{card1.caption1}</p>
                    </div>
                </div>
            </div>
            </a>
        </div>
    )
}