"use client"
import { envConfig } from "@/app/lib/config";
import axios from "axios";
import { useEffect, useState } from "react";

interface Periodo{
    semestre:string,
}

export default function Inscripciones() {
    const [periodo,setPeriodo]= useState<Periodo[]>([])

  useEffect(()=>{
    const getPeriodo = async()=>{
        const response = await axios.get(`${envConfig.apiUrl}/periodo`)
        setPeriodo(response.data)
    }
    getPeriodo()
  },[])

  return (
    <section className="containerSection">
      <h2 className="title"> INSCRITOS </h2>

      <form className="containerForm">
        <label>Seleccione el periodo</label>
        <div className="groupInput">
          <select>
            {periodo.map((p,index)=>(
                <option key={index}>
                    {p.semestre}
            </option>))}
          </select>
          <button className="button buttonSearch" type="submit">
            Buscar
          </button>
        </div>
      </form>

      <div>
        <table>
          <thead>
            <tr>
              <th>Carrera</th>
              <th>Genero</th>
              <th>Profesores</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>

      <div>
        <table>
          <thead>
            <tr>
              <th>Impresione B/N</th>
              <th>Impresiones Color</th>
              <th>Plotteo</th>
              <th>Escaner</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>5,000</td>
              <td>10,000</td>
              <td>10,000</td>
              <td>20,000</td>
              <td>45,000</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  );
}
//IO
