import React from "react";
//import { Link, NavLink, Router } from 'react-router-dom';
//import { Route } from 'react-router-dom';
const json = require('../HomePopularCards/carddata.json');


const Card = props => {
  return (
    <div className="card card-project" style={{ width: "18rem" }}>
      <img className="card-img-top" src={props.profileProjectImage} alt="" />
      <div className="top-card-body">
        {/*  <h6 className="link-hidden"><Link to={`/projectdetailpage/${props.projectID}/${props.projectName}`} target="_blank">{props.projectName}</Link></h6> */}
        {/*  <h6 className="link-hidden"><Link to={`/projectdetailpage/${props.projectID}`} target={_blank}>{props.projectName}</Link></h6> */}
        <h6 className="link-hidden">
          <a href={`/projectdetailpage/${props.projectID}`} >
            {props.projectName}
          </a>
        </h6>
        <p className="fontcolor-secondary fontsize-smallest">
          {props.projectBy}
        </p>
        <div className="fontcolor-secondary fontsize-smaller">
          <a href={null} className="link-hidden">
            {props.projectDescrition}
          </a>
        </div>
        <div className="fontsize-smallest fontcolor-secondary">
          {props.projectLocation}
        </div>
      </div>

      <div className="card-project-meter">
        <div className="progress">
          <div
            className="progress-bar bar-value"
            role="progressbar"
            aria-valuenow={75}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: "75%" }}
          />
        </div>
      </div>
      <div className="bottom-card-body">
        <div className="row">
          <div className="col-md-4">
            <div className="fontsize-base fontweight-semibold">46%</div>
          </div>
          <div className="col-md-4">
            <div className="fontsize-smaller fontweight-semibold">$ 1569</div>
            <div className="fontsize-smallest lineheight-tightest">Funded</div>
          </div>
          <div className="col-md-4">
            <div className="fontsize-smaller fontweight-semibold">100</div>
            <div className="fontsize-smallest lineheight-tightest">
              Days Remains
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const CardList = props => {
  return (
    <div className="row">
      {props.cards.map(card => (
        <div key={card.uniqueKey} className="col-md-4">
          <Card {...card} />
        </div>
      ))}
    </div>
  );
};

export default class ProjectCardContainer extends React.Component {
  state = json;
  render() {
    return <CardList cards={this.state.cards} />;
  }
}