import React from 'react';
import { Card, Empty, Tag } from 'antd';
import { ShoppingCartOutlined, CreditCardOutlined, SafetyCertificateOutlined, SettingOutlined } from '@ant-design/icons';
import { locales } from '@pisell/utils';
// 区块图标映射
var sectionIcons = {
  order: /*#__PURE__*/React.createElement(ShoppingCartOutlined, null),
  payment: /*#__PURE__*/React.createElement(CreditCardOutlined, null),
  auth: /*#__PURE__*/React.createElement(SafetyCertificateOutlined, null),
  default: /*#__PURE__*/React.createElement(SettingOutlined, null)
};
var SectionList = function SectionList(_ref) {
  var sections = _ref.sections,
    selectedSectionId = _ref.selectedSectionId,
    onSectionSelect = _ref.onSectionSelect;
  if (sections.length === 0) {
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-sections-empty"
    }, /*#__PURE__*/React.createElement(Empty, {
      description: locales.getText('registry.sections.empty'),
      image: Empty.PRESENTED_IMAGE_SIMPLE
    }));
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-settings-registry-sections"
  }, sections.map(function (section) {
    return /*#__PURE__*/React.createElement(Card, {
      key: section.id,
      className: "pisell-settings-registry-section-item pisell-settings-registry-section-card ".concat(selectedSectionId === section.id ? 'active' : ''),
      hoverable: true,
      onClick: function onClick() {
        return onSectionSelect(section.id);
      },
      bodyStyle: {
        padding: '16px'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-icon"
    }, sectionIcons[section.code] || sectionIcons.default), /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-info"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-name"
    }, section.name), /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-code"
    }, /*#__PURE__*/React.createElement(Tag, {
      color: "blue"
    }, section.code)), section.description && /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-description"
    }, section.description))));
  }));
};
export default SectionList;