---
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-800 w-14 h-14 border-neutral-300 dark:border-neutral-700"
  >
    <img src={logo} alt={company} class="w-8 h-8 rounded-full" />
  </div>

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