"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _data = require("./data");

var _renderers = require("./renderers");

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

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

function CanaryCards(props) {
  var checks = props.checks,
      _onClick = props.onClick;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
    className: "mt-1 grid grid-cols-1 gap-1 sm:gap-2 ",
    children: checks.map(function (check) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
        className: "col-span-1 flex shadow-sm rounded-md  rounded-l-md border-l border-t border-b border-gray-200 ",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          type: "button",
          className: "text-left flex-1 flex pl-3 items-center cursor-pointer justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate  ",
          onClick: function onClick() {
            return _onClick(check);
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "flex-1 py-2 text-sm ",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "text-gray-900 font-medium hover:text-gray-600 truncate",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderers.Title, {
                title: (0, _data.GetName)(check),
                icon: check.icon || check.type
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "float-right mr-2",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderers.StatusList, {
                check: check
              })
            })]
          })
        })
      }, check.id);
    })
  });
}