import React from "react";
import { Avatar } from "../Avatar/Avatar";
import "./Quote.scss";

/**
 * Single quote row: avatar plus headline and quote text. Rendered by
 * {@link QuoteList}.
 *
 * @param {Object} props
 * @param {{icon: string, headline: string, text: string}} props.item - Quote content.
 */
export const Quote = ({ item }) => {
  return (
    <div className="quote">
      <div className="quote__icon">
        <Avatar src={item.icon} alt={item.headline} />
      </div>
      <div className="quote__comment">
        <div className="quote__comment--headline">{item.headline}</div>
        <div className="quote__comment--description">{item.text}</div>
      </div>
    </div>
  );
};