"use strict";

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

var _Icon = _interopRequireDefault(require("../../Icon"));

var _jsxRuntime = require("react/jsx-runtime");

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

/* This example requires Tailwind CSS v2.0+ */

/**
 * bgColor,
 * initials,
 * href,
 * title,
 * subtitle
 * @param  {...any} classes
 * @returns
 */
function classNames() {
  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
    classes[_key] = arguments[_key];
  }

  return classes.filter(Boolean).join(" ");
}

function Card(_ref) {
  var cards = _ref.cards,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" : _ref$className;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
      className: "mt-3 grid gap-5 sm:gap-6 ".concat(className, " \""),
      children: cards.map(function (card) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
          className: "col-span-1 flex shadow-sm rounded-md",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: classNames(card.bgColor, "flex-shrink-0 flex items-center justify-center w-16 text-white text-sm font-medium rounded-l-md"),
            children: card.initials
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate",
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              className: "flex-1 px-4 py-2 text-sm truncate",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
                href: card.href,
                className: "text-gray-900 font-medium hover:text-gray-600",
                children: card.title
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                className: "text-gray-500",
                children: card.subtitle
              })]
            })
          })]
        }, card.name);
      })
    })
  });
}

function HorizontalCard(_ref2) {
  var cards = _ref2.cards,
      _ref2$className = _ref2.className,
      className = _ref2$className === void 0 ? "grid-cols-1 gap-4 sm:grid-cols-2" : _ref2$className;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "grid ".concat(className, "\""),
    children: cards.map(function (card) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "relative mb-5 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500",
        children: [card.icon != null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "flex-shrink-0",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
            icon: card.icon,
            className: "".concat(card.bgColor, " h-10 w-10 rounded-full"),
            size: ""
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "flex-1 min-w-0",
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
            href: "#",
            className: "focus:outline-none",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "absolute inset-0",
              "aria-hidden": "true"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
              className: "text-sm font-medium text-gray-900",
              children: card.title
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
              className: "text-sm text-gray-500 truncate",
              children: card.subtitle
            })]
          })
        })]
      }, card.id);
    })
  });
}