import { jsx } from "@emotion/core";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import { generate } from "shortid";
import cardMetaTypes from "./cardMetaTypes";
import CivicCardLink from "./CivicCardLink";
import { Chip } from "../..";

function CivicCardLayoutPreview(_ref) {
  var cardMeta = _ref.cardMeta;
  return jsx(Card, null, jsx(CardContent, null, jsx("h2", null, cardMeta.title), jsx("p", null, cardMeta.introText), jsx("section", {
    id: "".concat(cardMeta.slug, "-tags")
  }, cardMeta.tags.map(function (tag, index) {
    return jsx(Chip, {
      tag: tag,
      index: index,
      key: generate()
    });
  }))), jsx(CardActions, null, jsx(CivicCardLink, {
    slug: cardMeta.slug
  }, "Learn more")));
}

CivicCardLayoutPreview.propTypes = {
  cardMeta: cardMetaTypes
};
CivicCardLayoutPreview.displayName = "CivicCardLayoutPreview";
export default CivicCardLayoutPreview;