import "./Card.scss";
/**
 * Simple text card with optional headline, body and footer line. Used as the
 * detail popup of a {@link Circle} in the CircleInfographic.
 *
 * @param {Object} props
 * @param {string} [props.headline] - Card headline.
 * @param {string} [props.text] - Card body text.
 * @param {string} [props.underline] - Small footer line below the body.
 */
export const Card = ({ headline, text, underline }) => {
  return (
    <div className={`card`}>
      {headline ? <div className="card__headline">{headline}</div> : null}
      {text ? <div className="card__text">{text}</div> : null}
      {underline ? <div className="card__underline">{underline}</div> : null}
      {/* <div>{text}</div> */}
    </div>
  );
};