/* eslint-disable react/jsx-one-expression-per-line */

import React from 'react';
import PropTypes from 'prop-types';
import Icon from './Icon';

import '../base';
import styles from './QuickNavigationItem.styl';

export default function QuickNavigationItem({ children, icon, title, ...props }) {

  return (
    <div className={styles.quicknav}>
      {icon && <Icon name={icon} large className={styles.icon} />}
      <div>
        <div className={styles.title}>
          {title} <Icon name="doka-icon-more" info style={{ position: 'relative', top: 4 }} />
        </div>
        <div className={styles.description}>{children}</div>
      </div>
    </div>
  );
}

QuickNavigationItem.propTypes = {
  children: PropTypes.node,
  title: PropTypes.string,
  icon: PropTypes.string
};

QuickNavigationItem.defaultProps = {
  children: undefined,
  title: undefined,
  icon: undefined
};