import "./CSS/card.css";

const comment1 = {
    firstName: "Evangeline",
    lastName: "Mcintyre",
    avatar: "http://placehold.it/150x150",
    content: "Nisi ipsum anim reprehenderit ex id laboris sunt deserunt quis. Id velit aliqua commodo reprehenderit nostrud sit elit exercitation mollit proident amet et amet. Do reprehenderit tempor tempor excepteur fugiat irure anim deserunt elit incididunt ut cillum dolore."
}

const comment2 = {
    firstName: "Dudley",
    lastName: "Gates",
    avatar: "http://placehold.it/150x150",
    content: "Reprehenderit sunt enim dolore cillum. Proident Lorem commodo ea duis tempor ipsum dolore in magna aliquip reprehenderit esse. Consequat do fugiat veniam esse anim ullamco eu pariatur laboris ullamco velit excepteur ipsum. Ea consectetur quis anim fugiat fugiat veniam Lorem exercitation Lorem aliqua do."
}

const Avatar = (props) => {
    return <img src={props.avatar} className={"avatar"} alt={"Avatar"}/>
}

const Author = (props) => {
    return <h2 className={'author'}>{props.firstName} {props.lastName}</h2>
}

const CommentContent = (props) => {
    return <p className={"content"}>{props.content}</p>
}

const CommentSection = (props) => {
    return <div className={"comment-section"}>
        <Author firstName={props.firstName} lastName={props.lastName}/>
        <CommentContent content={props.content}/>
    </div>
}

const CommentCard = (props) => {
    return <div className={"card"}>
        <Avatar avatar={props.avatar}/>
        <CommentSection firstName={props.firstName} lastName={props.lastName} content={props.content}/>


    </div>
}

const ExerciseFour = (props) => {
    return <div>
        <CommentCard {...comment1}/>
        <hr/>
        <CommentCard {...comment2}/>
    </div>
}


export {ExerciseFour};

