"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
var _ControlsListItem = _interopRequireDefault(require("./ControlsListItem"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledButton = (0, _styledComponents.default)(_.Button).withConfig({
  displayName: "ControlsListItemButton__StyledButton",
  componentId: "sc-18f29es-0"
})(["&:hover{color:", ";}"], function (p) {
  return p.theme.color.buttonHoverSecondary;
});
var GRID = {
  areas: [['icon', 'label', 'button'], ['.', 'description', 'description']],
  templateColumns: ['auto', '1fr', '1fr'],
  templateRows: ['auto', '1fr'],
  gutter: {
    row: 1,
    col: 2
  }
};
var ControlsListItemButton = function ControlsListItemButton(_ref) {
  var label = _ref.label,
    onClick = _ref.onClick,
    Icon = _ref.Icon,
    buttonText = _ref.buttonText,
    description = _ref.description,
    disabled = _ref.disabled;
  return _react.default.createElement(_ControlsListItem.default, {
    disabled: disabled
  }, _react.default.createElement(_.CssGrid.Container, GRID, _react.default.createElement(_.CssGrid.Item, {
    area: "icon",
    justify: "start",
    align: "center"
  }, _react.default.createElement(_react.default.Fragment, null, Icon)), _react.default.createElement(_.CssGrid.Item, {
    area: "label",
    justify: "start",
    align: "center"
  }, _react.default.createElement(_.Typography, null, label)), _react.default.createElement(_.CssGrid.Item, {
    area: "button",
    justify: "end",
    align: "center"
  }, _react.default.createElement(StyledButton, {
    variant: "neutral",
    color: function color(t) {
      return t.color.cta;
    },
    onClick: onClick,
    disabled: disabled
  }, buttonText)), _react.default.createElement(_.CssGrid.Item, {
    area: "description"
  }, description && _react.default.createElement(_.Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.label;
    }
  }, description))));
};
var _default = exports.default = ControlsListItemButton;