import React, { FC } from "react";

/* Definimos los tipos de datos que seran pasados a este componente */
export interface TableProps {
  header: Array<string | JSX.Element>;
  Tablekey?: number
  children: Array<JSX.Element> | JSX.Element | void;
  buttons?: boolean;
  type: "form" | "list"
}

const Table: FC<TableProps> = (props) => {
    /* Deestructurar props para recibir las variables que necesitamos */
  const { header, children, buttons, type, Tablekey } = props;
  return (
    <div className="table-responsive">
      {/* Condicional para definir si la tabla tendra estilos de lista o de formulario */}
      <table key={Tablekey} className={type === "form" ? "c-table form" : "c-table"}>
        <thead>
          {/* Iterador para renderizar las cabeceras de la Tabla*/}
          <tr>
            {header?.map((title, index) => (
              /* En caso de que la cabecera no sea un texto se le añadiran estilos para centrar el componente */
              (typeof title === "string") ? 
              <th key={index}>{title}</th> : 
              <th key={index} >{title}</th> 
              
            ))} {/* el parametro buttons es tan solo un booleano usado para añadir una columna adicional  */}
                {buttons && <th></th>}
          </tr>
        </thead>
          <tbody>{children}</tbody>
      </table>
    </div>
      );
};

      export default Table;
