import React from 'react';
 import projects from '../data/projects.json';

 class ProjectCard extends React.Component {

            constructor(props) {
    super(props);
    this.state={
        projects,
        expanded: false,
        projectId: -1
    }
}

onViewChange = (e) => {
    this.setState({
        expanded: !this.state.expanded
    });
    console.log(this.state.projectId)
 };

render() {
    return (
        <React.Fragment>
        {this.state.projects.map((item) => {
            if (!this.state.expanded && item.category === this.props.category) {
                return (
                        <div key={item.id} className="project-card">
                            <div className="previewImg" style={{backgroundImage: `url(${item.previewImg}` }} ></div>
                            <div className="copy">
                                <h2>{item.title}</h2>
                                <p>{item.quickDesc}</p>
                            </div>
                            <div className="footer">
                            {item.tools.map((tool) => {
                                return (
                                    <div key={tool} className="tools" style={{backgroundImage: `url(${tool}` }}></div>
                                );
                            }
                            )}
                                <button onClick={() => this.onViewChange({projectId: item.id})} className="btn float-right"><i className="fas fa-play"></i></button>
                            </div>
                        </div>
                        );
                    }
            }

        )}
        </React.Fragment>
    );
};
};

 export default ProjectCard;