function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Icon } from '../';
import v from '../../config/variables';
const Item = styled.a`
  cursor: pointer;
  display: block;
  position: relative;
  color: ${props => props.textCenter ? v.theme.gray : v.theme.primary};
  text-align: ${props => props.textCenter && 'center'};
  font-size: 14px;
  font-weight: 300;
  background: ${v.backgrounds.light};
  border-bottom: 1px solid ${v.base.borderColor};
  padding: 10px 15px;

  :hover {
    color: ${v.theme.primary}
    background: ${v.backgroundsHover.light};
  }
`;
const IconContainer = styled.span`
  position: absolute;
  right: ${v.base.gutter}px;
`;
DropdownItem.propTypes = {
  children: PropTypes.string.isRequired,
  textCenter: PropTypes.bool,
  to: PropTypes.string,
  icon: PropTypes.string,
  disabled: PropTypes.bool,
  onPress: PropTypes.func
};
DropdownItem.defaultProps = {
  textCenter: false,
  to: null,
  icon: null,
  disabled: false,
  onPress: null
};

function DropdownItem(props) {
  const {
    to,
    disabled,
    onPress,
    icon,
    children
  } = props;
  return React.createElement(Item, _extends({}, props, {
    href: to || undefined,
    onClick: !to && !disabled && onPress ? onPress : undefined
  }), children, icon && React.createElement(IconContainer, null, React.createElement(Icon, {
    name: icon
  })));
}

export default DropdownItem;