import "./demos.css";
import "../../styles/styles.css";
import building1 from "./building1.png";
import iconButton from "./iconButton.svg";
import { Link } from "react-router-dom";

export const Demos: React.FC<any> = ({ item, onClick }) => {
  console.log(item)
  return (
    <div onClick={() => onClick()} className="main-block__container">
      <div 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={item.image.preview}
            className="demo_image"
          ></img>
          <div className="demo_info">
            <div className="title__block">
              <h4 className="title__demo">{item.title_full.ru}</h4>
              <p className="caption">{item.location.ru}</p>
            </div>
            <div className="body__block">
              <div className="description__container">
                <p className="caption1">{item.description.ru}</p>
                {item.description_second ? <p className="caption">{item.description_second.ru}</p> : <></>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
