---
import type { Experience } from "@/lib/types";
import ExperiencePositionItem from "./position-item.astro";

interface Props {
  experience: Experience;
}

const { experience } = Astro.props;
---

<div class="space-y-4 p-4 not-last:border-b">
  <div class="flex items-center space-x-4 px-2">
    <span class="size-2 rounded-full bg-foreground/60"></span>

    <h3 class="text-xl font-black">
      {experience.company}
    </h3>
  </div>

  <div
    class="relative space-y-4 pl-1 before:absolute before:left-3 before:h-full before:w-px before:bg-border"
  >
    {
      experience.positions.map((position, index) => {
        return <ExperiencePositionItem position={position} />;
      })
    }
  </div>
</div>