import React from "react";
import ReactDOM from "react-dom";
//import Grid from "@mui/material/Grid";
import OverlayCard from "../Componets/Cards/OverlayCard";
export default class OvItem extends React.Component {
  ViewOvelay(ov) {
    document.getElementById("backBtn").style.display = "block";
    ReactDOM.render(
      <OverlayCard OverlayInfo={ov} title={this.props.title} />,
      document.getElementById("HomePage")
    );
  }
  render() {
    return (
      <div
        align="center"
        className="flex_tab  "
        key={this.props.over.nane}
        style={{
          padding: "15px",
          display: "inline-flex",
          //border: "1px solid #CCC",
          borderRadius: " 10px"
          //boxShadow: "3px 4px 10px #CDC"
        }}
      >
        <div
          style={{
            border: "1px solid #AAA",
            boxShadow: "3px 4px 10px #CDC",
            borderRadius: "10px",
            padding: "5px"
          }}
        >
          <h3 style={{ textAlign: "center" }}>
            <b>{this.props.over.name}</b>{" "}
          </h3>

          <span>{this.props.title.discription}:</span>
          <b style={{}}> {this.props.over.description} </b>

          <div
            className=" btn-group"
            style={{
              display: "flex",
              margin: "10px",
              padding: "10px",
              float: "right"
            }}
          >
            <div></div>
            <div
              className="btn"
              style={{
                background: "orange",
                color: "#FFF",
                textDecoration: "none"
              }}
              onClick={() => (
                (document.getElementById(
                  "pTitle"
                ).textContent = this.props.over.name),
                this.ViewOvelay(this.props.over)
              )}
            >
              {" "}
              {this.props.title.homepage}
            </div>

            <div className="btn ">Добавить</div>
          </div>
        </div>
      </div>
    );
  }
}
