import "./demos.css";
import "../../styles/styles.css";
import iconButton from "./iconButton.svg";
import { useAppSelector } from "../../hooks/redux";

export const Demos: React.FC<any> = ({ item, onClick }) => {
  const { currentLang } = useAppSelector((state) => state.languageReducer);

  console.log(currentLang);
  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">
                {currentLang === "ru" ? item.title_full.ru : item.title_full.en}
              </h4>
              <p className="caption">{item.location.ru}</p>
            </div>
            <div className="body__block">
              <div className="description__container">
                <p className="caption1">
                  {currentLang === "ru"
                    ? item.description.ru
                    : item.description.en}
                </p>
                {item.description_second ? (
                  <p className="caption">
                    {currentLang === "ru"
                      ? item.description_second.ru
                      : item.description_second.en}
                  </p>
                ) : (
                  <></>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
