import React from "react";
import ContentSection from "./ContentSection";

const Stakeholder = ({name, title, subtitle}) => (
    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
        <img src={"img/stakeholders/" + name + ".png"}
             className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" alt={title}/>
        <div className="text-center mt-2">
            <h4>{title}</h4>
            <p>{subtitle}</p>
        </div>
    </div>
);

const StakeholderSection = () => (
    <ContentSection name="stakeholders" title="Stakeholders">
        <div className="row justify-content-center">
            <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding"/>
            <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts"/>
            <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune"/>
            <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design"/>
            <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts"/>
        </div>
    </ContentSection>
);

export default StakeholderSection;