import {connect} from "react-redux";
import {Link} from "react-router-dom";


const Projects = ({snippets}) => {
    return snippets ? (
        <div>
              <Link to="/">
                  <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
                    <span>&#8617;</span>Back to Main Page
                  </button>
              </Link>
              <br/> 
              <br/>
              <div style={{alignItems: "center", textAlign: "center"}}>
                  <Link to="/">
                      <button className="btn btn-success">New project</button>
                  </Link>
              </div>

              {snippets?.map((key, index) => (
                  <div style={{textAlign: "center", alignItems: "center"}}>
                      <div className="card w-50 ml-auto mr-auto mt-3 mb-5" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
                          <div className="card-body" style={{textAlign: "center"}}>
                              <h3 className="card-title mb-4 text-info">
                                  {snippets?.[index]?.title || "Project without name"}
                              </h3>
                              <p className="card-text">
                                  <span className="text-muted">Description</span>&nbsp;
                                  {snippets?.[index]?.description || ""}
                              </p>
                              <Link to={"/project/" + snippets?.[index]?._id}>
                                  <button className="btn btn-primary mt-3">Open project</button>
                              </Link>
                          </div>
                      </div>
                  </div>
              ))}    
               
            </div>

          ) : (

            <div>
                <Link to="/">
                    <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
                        <span>&#8617;</span>Back to Main Page
                    </button>
                </Link>
                <br /> <br />
                <div className="d-flex justify-content-center">
                    <div className="spinner-border mt-3" style={{width: "10rem", height: "10rem"}} role="status">
                        <span className="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        );
    };

const CProjects = connect((state) => ({
    snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,
}))(Projects);

export default CProjects;