"use strict";

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

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

function DescriptionCard(_ref) {
  var title = _ref.title,
      subtitle = _ref.subtitle,
      items = _ref.items;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "bg-white shadow overflow-hidden sm:rounded-lg",
      children: [title != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "px-4 py-5 sm:px-6",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
          className: "text-lg leading-6 font-medium text-gray-900",
          children: title
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: "mt-1 max-w-2xl text-sm text-gray-500",
          children: subtitle
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "border-t border-gray-200 px-4 py-5 sm:px-6",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("dl", {
          className: "grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2",
          children: items.map(function (item) {
            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              style: {
                gridColumn: "span ".concat(item.colspan ? item.colspan : 1)
              },
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("dt", {
                className: "text-sm font-medium text-gray-500",
                children: item.name
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("dd", {
                className: "mt-1 text-sm text-gray-900",
                children: item.value
              })]
            }, item.key);
          })
        })
      })]
    })
  });
}