import { Job } from "@/lib/types";
import { CircleUserRound, Building, Clock, Microchip } from "lucide-react";
import Chip from "./chip";
import formatDate from "@/utils/format-date";

const ExperienceCard = ({ job }: { job: Job }) => (
  <div className="bg-transparent backdrop-blur-sm glass-effect flex flex-col gap-2 p-4 text-white w-[20rem] max-w-[20rem] rounded-lg shadow-lg">
    <h4 className="flex items-center gap-1 text-2xl">
      <CircleUserRound /> {job.position}
    </h4>
    <h5 className="flex items-center gap-1 text-xl font-light">
      <Building /> {job.company}
    </h5>
    <h6 className="flex items-center gap-1">
      <Clock />
      {formatDate(job.start_date)} -{" "}
      {job.still_working ? "Present" : formatDate(job.end_date!)}
    </h6>
    <p className="flex items-center gap-1 font-bold">
      <Microchip /> Technologies
    </p>
    <div className="flex flex-wrap items-center w-full gap-2">
      {job.technologies.map((tech) => (
        <Chip key={tech} text={tech} />
      ))}
    </div>
  </div>
);

export default ExperienceCard;