import React from 'react';
import RenderChips from './RenderChips';


const ProjectCard = ({ project, onClick }) => {
    const summary = project.description.trim().split('\n\n')[0].trim();
    const summaryLength = 120;


    return (
        <div className="project-card" onClick={() => onClick(project.id)}>
            <h3>{project.title}</h3>
            
            {project.langs && <RenderChips langs={project.langs} type='lang'/>}
            
            {project.software && <RenderChips langs={project.software} type='software'/>}
			<div style={{marginBottom: "12px"}}>

			</div>
            <p className="project-summary">
                {summary.length > summaryLength ? `${summary.substring(0, summaryLength)}...` : summary}
            </p>
            
            <div className="view-details">View Details</div>
        </div>
    );
};

export default ProjectCard;