import './demos.css'
import "../../styles/styles.css";
import building1 from './building1.png'
import building2 from './building2.png'

import { useAppDispatch, useAppSelector } from "../../hooks/redux";

import iconButton from "./iconButton.svg"
import { useTranslation } from 'react-i18next';


export const Demos: React.FC<any> = ({ cards }) => {
    const { currentLang } = useAppSelector((state) => state.languageReducer);
    const {t} = useTranslation()

    return (<div className=" demo__container_mobile main-block__container width demo__container">
        <h3 className='demos__tittle'>
            {t('demo-title')}
        </h3>
        {cards.map((i: any) => (
            <a href={`https://stream.graff.tech/?lang=${currentLang}`} target='_blank' rel="noreferrer" data-aos="fade-up"
                data-aos-delay="100" className='demos_container'>
                <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={i.preview} className='demo_image'></img>
                    <div className='demo_info'>
                        <div className='title__block'>
                            <h4 className='title__demo'>{i.title}</h4>
                            <p className='caption'>{i.location}</p>
                        </div>
                        <div className='body__block'>
                            <p className='caption1'>{i.description}</p>
                            {i.feature_description ? <p className='caption2'>{i.feature_description}</p> : <p></p>}
                        </div>
                    </div>
                </div>
            </a>
        ))}
    </div>

    )

}