import React, { useState, useEffect, FC } from "react";
import { generalTable } from "../../../api/tables";
import { Summary } from "../../../types/summary";
import { TableHeader as Header, TdGroup } from "../shared";
import * as classes from "../tables.module.css";

const TemperaturePerSector: FC = () => {
  const [data, setData] = useState<Summary[]>([]);

  useEffect(() => {
    generalTable("", "", "").then((res) => {
      setData(JSON.parse(res));
    });
  }, []);

  // Formato de los summaries(filas)
  const rows = data?.map((x) => (
    <tr key={x.station.code}>
      <th className={classes.cell}>{x.station.name}</th>
      <TdGroup>
        <td>{x.lt10}%</td>
        <td>{x.gt30}%</td>
        <td>{x.gt33}%</td>
      </TdGroup>
      <td className={classes.cell}>{x.grados_acumulados}</td>
      <td className={classes.cell}>{x.amplitud_termica}</td>
      <td className={classes.cell}>{x.precip_acumulada}</td>
    </tr>
  ));

  return (
    <table className={classes.table}>
      <Header daysToMatchCurrentTemperature={false} />
      <tbody>{rows}</tbody>
    </table>
  );
};
export default TemperaturePerSector;