import React from "react";
import { Card, CardBody, CardText, CardTitle, CardLink, CardImg } from "../../";

export default (
  <div className="container-fluid">
    <div className="row mb-2">
      <div className="col col-sm-4">
        <Card>
          <CardImg src="https://via.placeholder.com/150" variant="top" alt="..." />
          <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>
              Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </CardText>
          </CardBody>
          {/*ToDo: use ListGroup Component*/}
          <ul className="list-group list-group-flush">
            <li className="list-group-item">Cras justo odio</li>
            <li className="list-group-item">Dapibus ac facilisis in</li>
            <li className="list-group-item">Vestibulum at eros</li>
          </ul>
          <CardBody>
            <CardLink href="#">Card link</CardLink>
            <CardLink href="#">Another link</CardLink>
          </CardBody>
        </Card>
      </div>
    </div>
  </div>
);