// Challenge: Refactor the `render()` method with declare all variables at top

render() {
  return (
    <li>
      <div className="profile-card">
        <header className="profile-header" onClick={this.toggleClass}>
          <img src={this.props.profile.image} alt={this.props.profile.name} />
          <h2>{this.props.profile.name}</h2>
        </header>
        <section
          className={
            this.state.active ? "skills-container hidden" : "skills-container"
          }
        >
          <h4>Skills</h4>
          <ul className="skills-list">
            {this.props.profile.skills.map(skill => {
              return <li key={skill}>{skill}</li>
            })}
          </ul>
        </section>
      </div>
    </li>
  )
}

// Refactors to ->

// 1. Replace all `this.props.profile` instances to be just `profile` to allow for readability
//    We use destructuring to accomplish this
//    Now we know where the `profile` is coming from when we are referring to it
// 2. Replace the full `this.state.active` with the destructured value
//    If we need to refactor to swap some props for state, we only change it in one place

render() {
  const { profile } = this.props
  const { active } = this.state

  return (
    <li>
      <div className="profile-card">
        <header className="profile-header" onClick={this.toggleClass}>
          <img src={profile.image} alt={profile.name} />
          <h2>{profile.name}</h2>
        </header>
        <section
          className={
            active ? "skills-container hidden" : "skills-container"
          }
        >
          <h4>Skills</h4>
          <ul className="skills-list">
            {profile.skills.map(skill => {
              return <li key={skill}>{skill}</li>
            })}
          </ul>
        </section>
      </div>
    </li>
  )
}