{"size": 883, "ext": "js", "max_stars_repo_path": "thingmenn-frontend/src/widgets/details-header/index.js", "max_stars_repo_name": "baering/thingmenn", "max_stars_repo_stars_event_min_datetime": "2016-10-26T12:08:15.000Z", "max_stars_repo_stars_event_max_datetime": "2017-11-08T01:46:29.000Z", "max_issues_repo_path": "thingmenn-frontend/src/widgets/details-header/index.js", "max_issues_repo_name": "baering/thingmenn", "max_issues_repo_issues_event_min_datetime": "2016-10-26T09:31:19.000Z", "max_issues_repo_issues_event_max_datetime": "2021-11-25T11:30:54.000Z", "max_forks_repo_path": "thingmenn-frontend/src/widgets/details-header/index.js", "max_forks_repo_name": "baering/thingmenn", "max_forks_repo_forks_event_min_datetime": "2021-09-11T11:13:22.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-11T11:13:22.000Z"}
{"max_stars_count": 3, "max_issues_count": 7, "max_forks_count": 1, "avg_line_length": 25.9705882353, "max_line_length": 67, "alphanum_fraction": 0.6138165345}
import React from 'react'
import PropTypes from 'prop-types'
import './styles.css'

const DetailsHeader = ({ id, mpName, description, imagePath }) => {
  return (
    <div className="DetailsHeader">
      <div className="DetailsHeader-details">
        <div
          className="DetailsHeader-image"
          style={{
            backgroundImage: `url(${imagePath})`,
          }}
        />
        <div className="DetailsHeader-bio">
          <h1 className="DetailsHeader-bioName">
            {mpName} <p className="Main-subheader"></p>
          </h1>
          <p className="DetailsHeader-bioText">{description}</p>
        </div>
      </div>
    </div>
  )
}

DetailsHeader.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  mpName: PropTypes.string,
  imagePath: PropTypes.string,
  description: PropTypes.any,
}

export default DetailsHeader
