portfolio/src/components/job.tsx

"use client";
import { Volunteer } from "@/icons/Volunteer";
import {
  faCalendar,
  faQuestionCircle,
  faTasks,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";

interface JobProps {
  title: string;
  company: string;
  start: Date;
  end: Date | null;
  link: string;
  type: "volunteer" | "fixed" | "project" | "hypothetical";
  description: string;
  logo: string;
}

const IconMap = {
  volunteer: Volunteer,
  fixed: faCalendar,
  project: faTasks,
  hypothetical: faQuestionCircle,
};

export const Job = (props: JobProps): JSX.Element => {
  const { title, company, start, end, link, type, description, logo } = props;
  const [showDescription, setShowDescription] = useState(false);
  const toggleDescription = () => {
    setShowDescription(!showDescription);
  };
  const color =
    type === "hypothetical"
      ? "text-[--primary]"
      : end
        ? "text-[--former]"
        : "text-[--current]";
  const border =
    type === "hypothetical"
      ? "border-[--primary]"
      : end
        ? "border-[--former]"
        : "border-[--current]";
    
  const borderStyle = end ? "border-dashed border-2" : "border-double border-4";
  return (
    <li className={`mb-10 ms-6 ${color}`}>
      <span
        className={`absolute flex items-center justify-center w-6 h-6 bg-[--background] rounded-full -start-3 ${color}`}
      >
        <FontAwesomeIcon icon={IconMap[type]} className="text-3xl" />
      </span>
      <h3 className={`flex items-center mb-1 text-lg font-semibold`}>
        {title} for {company}
      </h3>
      <time className="block mb-2 text-sm font-normal leading-none">
        {start.toLocaleDateString("en-US", {
          month: "long",
          year: "numeric",
        })}{" "}
        -{" "}
        {end
          ? end.toLocaleDateString("en-US", {
              month: "long",
              year: "numeric",
            })
          : "Present"}
      </time>
      {showDescription && (
        <div
          className="mb-4 text-base font-normal"
          dangerouslySetInnerHTML={{ __html: description }}
        ></div>
      )}
      <button
        onClick={toggleDescription}
        className={`inline-flex items-center px-4 py-2 text-sm font-medium ${borderStyle} ${border}`}
      >
        {showDescription ? "Hide Details" : "Show Details"}
      </button>
    </li>
  );
};