'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n  display: block; \n  width: 100%; \n  background-color: var(--px-card-background-color, lightgray); \n  padding-bottom: 4rem; \n  border-top: 1px solid var(--px-card-border-color, gray); \n  border: var(--px-card-border);\n'], ['\n  display: block; \n  width: 100%; \n  background-color: var(--px-card-background-color, lightgray); \n  padding-bottom: 4rem; \n  border-top: 1px solid var(--px-card-border-color, gray); \n  border: var(--px-card-border);\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n padding: 1rem; \n padding-top: 1.33333rem; \n border-bottom: 1px solid var(--px-card-border-color, transparent); \n margin-bottom: 1rem; \n'], ['\n padding: 1rem; \n padding-top: 1.33333rem; \n border-bottom: 1px solid var(--px-card-border-color, transparent); \n margin-bottom: 1rem; \n']),
    _templateObject3 = _taggedTemplateLiteral(['\n height: 2rem; \n line-height: 2rem; \n text-transform: uppercase;\n color: var(--px-card-header-color, black);\n'], ['\n height: 2rem; \n line-height: 2rem; \n text-transform: uppercase;\n color: var(--px-card-header-color, black);\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  padding-left: 1rem; \n  padding-right: 1rem;\n  ', '\n'], ['\n  padding-left: 1rem; \n  padding-right: 1rem;\n  ', '\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n    padding: none;\n  '], ['\n    padding: none;\n  ']),
    _templateObject6 = _taggedTemplateLiteral(['\n  height: 2rem; \n  width: 2rem; \n  color: var(--px-card-icon-color, black); \n  cursor: auto; \n  \n  color: var(--px-card-action-icon-color, black); \n  cursor: pointer; \n  \n  &:hover{\n    color: var(--px-card-action-icon-color--hover, blue);\n  }\n  &:active{\n    color: var(--px-card-action-icon-color--pressed, blue); \n  }\n  &:not(:last-of-type) { \n    margin-right: .66666rem; \n  }\n'], ['\n  height: 2rem; \n  width: 2rem; \n  color: var(--px-card-icon-color, black); \n  cursor: auto; \n  \n  color: var(--px-card-action-icon-color, black); \n  cursor: pointer; \n  \n  &:hover{\n    color: var(--px-card-action-icon-color--hover, blue);\n  }\n  &:active{\n    color: var(--px-card-action-icon-color--pressed, blue); \n  }\n  &:not(:last-of-type) { \n    margin-right: .66666rem; \n  }\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Icon = require('../IconSet/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Card = _styledComponents2.default.div(_templateObject);

var CardHeader = _styledComponents2.default.header(_templateObject2);

var CardTitle = _styledComponents2.default.span(_templateObject3);

var CardBody = _styledComponents2.default.section(_templateObject4, function (props) {
  return props.fullBleed && (0, _styledComponents.css)(_templateObject5);
});

var CardIcon = _styledComponents2.default.span(_templateObject6);

var CardComponent = function CardComponent(_ref) {
  var headerText = _ref.headerText,
      icon = _ref.icon,
      fullBleed = _ref.fullBleed,
      children = _ref.children;
  return _react2.default.createElement(
    Card,
    { className: 'px-card' },
    _react2.default.createElement(
      CardHeader,
      { className: 'px-card-header' },
      icon && _react2.default.createElement(
        CardIcon,
        null,
        _react2.default.createElement(_Icon2.default, { icon: icon, size: 22 })
      ),
      _react2.default.createElement(
        CardTitle,
        null,
        headerText
      )
    ),
    _react2.default.createElement(
      CardBody,
      { fullBleed: fullBleed, className: 'px-card-body' },
      children
    )
  );
};

CardComponent.displayName = 'Card';

exports.default = CardComponent;