import styles from './Helps.module.css'

import helps from '../data/helps.json'
const header = helps.header
const helpRows = helps.rows

export default function Helps () {
  const renderTable = () => {
    return (
      <table className={styles.helpTable}>
        <thead>
          <tr className={styles.helpHeader}>
            {header.map((h, i) => {
              return (
                <td key={i}>
                  {h}
                </td>
              )
            })}
          </tr>
        </thead>
        <tbody>
          {Object.keys(helpRows).map((key, i) => {
            const item = helpRows[key]
            return (
              <tr className={styles.helpRow} key={i}>
                <td>
                  {item.name}
                </td>
                <td>
                  {item.description}
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    )
  }
  return (
    <div className={styles.text}>
      <div className={styles.title}>
        Amiben tudsz segíteni:
      </div>
      <div>
        {renderTable()}
      </div>
    </div>
  )
}