import React, { useState, useEffect } from 'react';


function Table() {

  // Usamos useState para guardar os dados, o que é uma boa prática
  //const [resposta, setResposta] = useState(dadosEstáticos);
  
  //const { data: pacientes, pagination } = resposta;

  let [pacientes, setPacientes] = useState([])

  var requestOptions = {
    method:'GET',
    redirect:'follow'
  }

useEffect(() => {
  console.log('hsjduhdeu')
  fetch('https://mock.apidog.com/m1/1053378-0-default/pacientes', requestOptions)
  .then(response =>  response.json())
  .then(result => setPacientes(result['data']))
  
  .catch(error => console.log('Erro para encontrar pacientes no banco de dados', error))}, [])


  return (
    <>
      <div className="page-heading">
        <h3>Tabela de Pacientes</h3>
      </div>
      <div className="page-content">
        <section className="row">
          <div className="col-12">
            <div className="card">
              <div className="card-header">
                <h4 className="card-title">Pacientes Cadastrados</h4>
              </div>
              <div className="card-body">
                <div className="table-responsive">
                  <table className="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th>Nome</th>
                        <th>CPF</th>
                        <th>Email</th>
                        <th>Telefone</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {pacientes.length > 0 ? (
                        pacientes.map(paciente => (
                          <tr key={paciente.id}>
                            <td>{paciente.nome}</td>
                            <td>{paciente.cpf}</td>
                            <td>{paciente.email}</td>
                            <td>{paciente.telefone}</td>
                            <td>
                              <span className={`badge ${paciente.status === 'ativo' ? 'bg-success' : 'bg-danger'}`}>
                                {paciente.status}
                              </span>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan="5" className="text-center">Nenhum paciente encontrado.</td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}

export default Table;