import React from "react";

//import FullCard from "./fullCard";
//import PkgList from "../../pages/pks";
import "./style.css";
//import Swiper from "react-slider-swiper";
//import InstallForm from "../pages/InstallForm";
const ui = { description: "Описание" };
class Scard extends React.Component {
  //Viewinstall(package) {
  //const pkgInfo = this.props.rec[package]
  //return <InstallForm rec={pkgInfo} />;
  //}:
  params = {
    pagination: ".swiper-pagination",
    paginationClickable: true,
    nextButton: ".swiper-button-next",
    prevButton: ".swiper-button-prev",
    spaceBetween: 30,
    runCallbacksOnInit: true,
    onInit: (swiper) => {
      this.swiper = swiper;
    }
  };

  render() {
    return this.props.rec.map((pksl, i) => (
      <div
        className="Card"
        style={{
          padding: "13px",
          border: "1px solid #AAA",
          //borderRadius: "16px",
          backgroundColor: "#f9f9fa",
          width: "20%"

          //coloor: "#444"
          //background: "#2E323F",
          //color: "#AAA"
        }}
        onClick={() => this.props.ViewPackageInfo(this.props.rec[i])}
      >
        <img
          style={{
            position: "relative",
            float: "left",
            width: "48px",
            height: "48px"
          }}
          src="/"
        />
        <div
          style={{
            //display: "flex",
            flex: "1",
            padding: " 0 6px",
            height: "100%",
            borderBottom: " 1px solid rgba(0, 0, 0, 0.05)",
            justifyContent: "space-between"

            //color: "#AAA"
          }}
        >
          <b style={{ width: "100%", display: "block", textAlign: "center" }}>
            {pksl.Name.split("/")[1]}
          </b>
          {
            <div
              style={{ position: "relative", top: "36px", textAlign: "left" }}
            >
              <div className="descrition" style={{ display: "flex" }}>
                <b style={{ textAlign: "left", whiteSpace: "break-spaces" }}>
                  {ui.description} {":"} {pksl.Description}
                </b>
              </div>
            </div>
          }
        </div>
      </div>
    ));
  }
}
export default Scard;