'use strict';

var core = require('@linaria/core');
var index = require('../Typo/index.js');
var React = require('react');
var style = require('./style.js');
var index$1 = require('../Button/index.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
const SIZE_FONT_MAP = {
  large: {
    title: index.Typo.Display.d2_bold_title,
    desc: index.Typo.Label.l2_regular
  },
  medium: {
    title: index.Typo.Display.d3_bold_title,
    desc: index.Typo.Label.l3_regular
  },
  small: {
    title: index.Typo.Heading.h2_bold_title,
    desc: index.Typo.Label.l4_regular
  },
  area: {
    title: index.Typo.Heading.h2_bold_title,
    desc: index.Typo.Label.l4_regular
  },
  xSmall: {
    title: index.Typo.Heading.h2_regular_title
  }
};
const BlankState = (props) => {
  const {
    className,
    style: style$1,
    width,
    height,
    title,
    description,
    action,
    backgroundColor,
    size = "medium"
  } = props;
  const fontStyle = SIZE_FONT_MAP[size];
  const buttonSize = size === "large" || size === "medium" ? "middle" : "small";
  return /* @__PURE__ */ React__default.default.createElement(
    "div",
    {
      className: core.cx(className, style.BlankStateWrapper, size, backgroundColor),
      style: __spreadValues({
        width: typeof width === "number" ? `${width}px` : width,
        height: typeof height === "number" ? `${height}px` : height
      }, style$1 || {})
    },
    /* @__PURE__ */ React__default.default.createElement("div", { className: core.cx("title", fontStyle.title) }, title),
    size !== "xSmall" && description ? /* @__PURE__ */ React__default.default.createElement("div", { className: core.cx("desc", fontStyle.desc) }, description) : null,
    action ? /* @__PURE__ */ React__default.default.createElement(
      index$1,
      {
        type: "ordinary",
        size: buttonSize,
        className: core.cx("action-button", buttonSize),
        onClick: action.onClick
      },
      action.label
    ) : null
  );
};
var BlankState$1 = BlankState;

module.exports = BlankState$1;
