import React, { PropTypes } from 'react';
import radium from 'radium';
import CloseIcon from 'material-ui/svg-icons/navigation/close';

const DialogTitleStyle = {
  title: {
    borderBottom: '1px solid #e5e5e5',
    padding: '10px 15px',
    position: 'relative',
  },
  titleText: {
    fontSize: '20px',
  },
  close: {
    position: 'absolute',
    top: '15px',
    right: '15px',
    cursor: 'pointer',
  },
};

const DialogTitle = (props) => {
  const {
    title,
    onClose,
    noClose,
  } = props;

  let closeContent = (
    <div style={DialogTitleStyle.close}>
      <CloseIcon onClick={onClose} />
    </div>
  );

  if (noClose) {
    closeContent = void 0;
  }

  return (
    <div style={DialogTitleStyle.title}>
      <div style={DialogTitleStyle.titleText}>{title}</div>
      {closeContent}
    </div>
  );
};

DialogTitle.propTypes = {
  onClose: PropTypes.func,
  noClose: PropTypes.bool,
  title: PropTypes.node,
};

export default radium(DialogTitle);