/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { faCalendar, faTasks } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Job } from "../../components/job";
import { Rule } from "../../components/rule";
import { Jobs } from "../../config/Jobs";
import { Volunteer } from "../../icons/Volunteer";
import type { JSX } from "react";

/**
 * Renders the /work page.
 * @returns A React Component.
 */
const Work = (): JSX.Element => {
  return (
    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <h1 className="text-5xl">{`Our Work`}</h1>
      <p>
        {`We run a software engineering and community management firm known as
        NHCarrigan.`}
      </p>
      <Rule />
      <section>
        <h2 className="text-3xl">{`Legend`}</h2>
        <p>
          {`Our work is listed here in reverse chronological order. The symbols
          and colours have a specific meaning:`}
        </p>
        <table className="m-auto w-1/2">
          <thead>
            <tr>
              <th>{`Symbol`}</th>
              <th>{`Meaning`}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <FontAwesomeIcon className="h-14" icon={faCalendar} />
              </td>
              <td>{`Fixed-Rate Contract (hourly/salary)`}</td>
            </tr>
            <tr>
              <td>
                <FontAwesomeIcon className="h-14" icon={faTasks} />
              </td>
              <td>{`Project-based Contract`}</td>
            </tr>
            <tr>
              <td>
                <FontAwesomeIcon className="h-14" icon={Volunteer} />
              </td>
              <td>{`Pro-bono Contract`}</td>
            </tr>
            <tr>
              <td>
                <p className="h-14 w-14 border-[--current]
                border-double border-4"></p>
              </td>
              <td className="text-[--current]">{`Current Contract`}</td>
            </tr>
            <tr>
              <td>
                <p className="h-14 w-14 border-[--former]
                border-dashed border-2"></p>
              </td>
              <td className="text-[--former]">{`Former Contract`}</td>
            </tr>
          </tbody>
        </table>
        <Rule />
      </section>
      <section>
        <h2 className="text-3xl">{`Timeline`}</h2>
        <ol className="relative border-s border-[--primary] w-4/5 m-auto">
          {Jobs.toSorted((a, b) => {
            return b.start.getTime() - a.start.getTime();
          }).map(
            (job) => {
              return <Job
                company={job.company}
                description={job.description}
                end={job.end}
                key={`${job.title} - ${job.company}`}
                link={job.link}
                logo={job.logo}
                start={job.start}
                title={job.title}
                type={job.type}
              />;
            }
            ,
          )}
        </ol>
      </section>
    </main>
  );
};

export default Work;