import "./Card.css";
import iconButton from "./iconButton.svg";

import { useAppSelector } from "hooks/redux";

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

  console.log(currentLang);
  return (
    <div onClick={() => onClick()} className="card">
      <img className="card-image" src={item.preview} alt='building' />
      <div className="card-body">
        <div className="card-header">
          <img src={item.icon} className="card-icon" alt="лого" />
          <div className="card-name">
            <h2 className="caption-name">{item.app_title}</h2>
            <h2 className="card-location">{item.location}</h2>
          </div>
        </div>
        <div className="card-description-block">
          <p className="card-description">                  
            {item.description}
          </p>
          {item.feature_description ? <p className="card-description-second">
            {item.feature_description}
          </p> : <p className="card-description-empty"></p>}

        </div>

      </div>
    </div>

  );
};