import React, { FC } from "react";
import * as classes from "./tables.module.css";

interface tableHeaderProps {
  //Change this name
  daysToMatchCurrentTemperature: boolean;
}

export const TableHeader: FC<tableHeaderProps> = ({ daysToMatchCurrentTemperature }) => {
  return (
    <thead>
      <th className={classes.cell}>Octubre - Marzo</th>
      <td style={{ padding: "0" }} className={classes.cell}>
        <table style={{ width: "100%" }}>
          <tr>
            <td colSpan={100}>% Horas segun temperatura</td>
          </tr>
          <tr>
            <td>&lt;10%</td>
            <td>&gt;30%</td>
            <td>&gt;33%</td>
          </tr>
        </table>
      </td>

      <td className={classes.cell}>Grados días acumulados</td>

      {daysToMatchCurrentTemperature &&
        <td className={classes.cell}>Días para igualar temperatura actual</td>
      }

      <td className={classes.cell}>Amplitud térmica</td>

      <td className={classes.cell}>Precipitaciones acumuladas [mm]</td>
    </thead>
  );
};

export const TdGroup: FC = ({ children }) => {
  return (
    <td className={classes.tdGroup}>
      <table>
        <tr>{children}</tr>
      </table>
    </td>
  );
};