import fetch from 'node-fetch'

const Person = ({ data, status }) =>
  status === 200 ? (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Height</th>
          <th>Mass</th>
          <th>Hair color</th>
          <th>Skin color</th>
          <th>Eye color</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{data.name}</td>
          <td>{data.height}</td>
          <td>{data.mass}</td>
          <td>{data.hair_color}</td>
          <td>{data.skin_color}</td>
          <td>{data.eye_color}</td>
          <td>{data.gender}</td>
        </tr>
      </tbody>
    </table>
  ) : (
    <p>{data.message}</p>
  )

export async function getStaticPaths() {
  const response = await fetch('http://localhost:3000/api/people')
  const data = await response.json()

  const paths = data.map(person => ({
    params: {
      id: person.id,
    },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const response = await fetch(`http://localhost:3000/api/people/${params.id}`)
  const data = await response.json()

  return {
    props: {
      data,
      status: response.status,
    },
  }
}

export default Person