import React from 'react'
import AgendamentosMes from './DadosConsultasMock'
import dayjs from "dayjs"
import CardConsulta from './CardConsulta'
const TabelaAgendamentoMes = ({ListarDiasdoMes}) => {

  const agendamentosMes = [0,1,2,3,4,5]




    const dataHoje = dayjs()
    const AnoAtual = dataHoje.year()

    const mes = dataHoje.month() + 1

  let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes)


   let segundas = ListaDiasDatas[0];
   let tercas = ListaDiasDatas[1];
   let quartas = ListaDiasDatas[2];
   let quintas = ListaDiasDatas[3];
   let sextas = ListaDiasDatas[4]
  
  return (
    <div>
        <table>
            <tr>
                <th>Seg</th>
                <th>Ter</th>
                <th>Qua</th>
                <th>Qui</th>
                <th>Sex</th>
            </tr>

            {Object.entries(AgendamentosMes).map(([semanas, dias], index) => (
              
              <tr key={index}>
                <td>
                  <div>
                  {segundas[index]}

                  <div>
                    {dias.segunda.map((consulta) => (
                      <CardConsulta DadosConsulta={consulta} />
                    ) )}

                  </div> 

                  </div>
                </td>
                
                <td>
                 
                  <div>
                    {tercas[index]}

                    <div>
                        {dias.terca.map((consulta) => (
                          <CardConsulta DadosConsulta={consulta} />
                        ) )}

                    </div> 

                  </div>
                </td>

                <td>
                
                  <div>
                  {quartas[index]}

                  <div>
                    {dias.quarta.map((consulta) => (
                      <CardConsulta DadosConsulta={consulta} />
                    ) )}

                  </div> 

                  </div>
                </td>
                <td>
                
                  <div>
                  {quintas[index]}

                  <div>
                    {dias.quinta.map((consulta) => (
                      <CardConsulta DadosConsulta={consulta} />
                    ) )}

                  </div> 

                  </div>
                </td>
                <td>
                
                  <div>
                  {sextas[index]}

                  <div>
                    {dias.sexta.map((consulta) => (
                      <CardConsulta DadosConsulta={consulta} />
                    ) )}

                  </div> 

                  </div>
                </td>                
              </tr>
            ))}


        </table>

    </div>
  )
}

export default TabelaAgendamentoMes