import { jsx } from "@emotion/core";
import { Fragment } from "react";
import PropTypes from "prop-types";
import _ from "lodash";
import { generate } from "shortid";
import Collapsable from "../Collapsable/Collapsable";
export function Resource(_ref) {
  var section = _ref.section;
  return jsx(Fragment, null, jsx("h3", null, section.heading), jsx("ul", null, section.items.map(function (item) {
    return jsx("li", {
      key: generate()
    }, jsx("a", {
      href: item.link
    }, item.description));
  })));
}
Resource.propTypes = {
  section: PropTypes.shape({
    heading: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
      link: PropTypes.string,
      description: PropTypes.string
    }))
  })
};
export function MetadataQuestion(_ref2) {
  var question = _ref2.question,
      answer = _ref2.answer;
  return jsx(Fragment, null, jsx("h4", null, question), jsx("p", null, answer));
}
MetadataQuestion.propTypes = {
  question: PropTypes.string,
  answer: PropTypes.string
};
export function CollapsableSection(_ref3) {
  var items = _ref3.items,
      collapseAfter = _ref3.collapseAfter,
      description = _ref3.description;

  var beforeFold = _.slice(items, 0, collapseAfter);

  var afterFold = _.slice(items, collapseAfter);

  return (afterFold && afterFold.length) > 0 ? jsx(Collapsable, {
    description: description
  }, jsx(Collapsable.Section, null, beforeFold), jsx(Collapsable.Section, {
    hidden: true
  }, afterFold)) : jsx(Fragment, null, beforeFold);
}
CollapsableSection.propTypes = {
  items: PropTypes.arrayOf(PropTypes.node),
  collapseAfter: PropTypes.number,
  description: PropTypes.string
};