import React from "react";
import { useTranslation } from "next-i18next";

import styles from "./JobTable.module.scss";
import Button from "../../atoms/button";

const JobTable = ({ data, handleJobSelect }: any) => {
  const { t } = useTranslation("common");

  return (
    <article className={styles.jobTable}>
      <div className="container">
        <table className="table-fixed">
          <thead className="ltr:text-left rtl:text-right">
            <tr>
              <th>{t("Job title")}</th>
              <th>{t("Domain")}</th>
              <th className="hidden md:table-cell">{t("Date")}</th>
              <th>{t("Your cv")}</th>
            </tr>
          </thead>

          <tbody>
            {data.map(({ id, title, domain, date }: any) => (
              <tr key={id}>
                <td>{title}</td>
                <td>{domain}</td>
                <td className="hidden md:table-cell">{date}</td>
                <td>
                  <Button onClick={() => handleJobSelect(id)}>{t("Upload")}</Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </article>
  );
};

export default JobTable;