---
const { logo, dates, role, company, description } = Astro.props;
---

<div class="relative flex flex-col justify-start pl-12">
  <div
    class="absolute top-0 left-0 z-40 flex items-center justify-center -translate-x-1/2 bg-white border rounded-full dark:bg-neutral-950 w-14 h-14 border-neutral-300 dark:border-neutral-700"
  >
    <img src={logo} alt={company} class="w-8 h-8" />
  </div>

  <p
    class="text-xs uppercase text-neutral-400 dark:text-neutral-500 trackign-widest"
  >
    {dates}
  </p>
  <h3 class="my-1 text-lg font-bold dark:text-neutral-100">{role}</h3>
  <p class="mb-1 text-sm font-medium dark:text-neutral-300">{company}</p>
  <p class="text-sm font-light text-neutral-600 dark:text-neutral-400">
    {description}
  </p>
</div>
