import React from 'react';
import styled from 'styled-components';
import { Button, Typography, CssGrid as Grid } from '../..';
import ControlsListItem from './ControlsListItem';
var StyledButton = styled(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.createElement(ControlsListItem, {
    disabled: disabled
  }, React.createElement(Grid.Container, GRID, React.createElement(Grid.Item, {
    area: "icon",
    justify: "start",
    align: "center"
  }, React.createElement(React.Fragment, null, Icon)), React.createElement(Grid.Item, {
    area: "label",
    justify: "start",
    align: "center"
  }, React.createElement(Typography, null, label)), React.createElement(Grid.Item, {
    area: "button",
    justify: "end",
    align: "center"
  }, React.createElement(StyledButton, {
    variant: "neutral",
    color: function color(t) {
      return t.color.cta;
    },
    onClick: onClick,
    disabled: disabled
  }, buttonText)), React.createElement(Grid.Item, {
    area: "description"
  }, description && React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.label;
    }
  }, description))));
};
export default ControlsListItemButton;