<script lang="ts">
    import Collapsible from "./Collapsible.svelte";

    export let timelineData: Array<{
        title: string;
        description: string;
        duration: string;
    }>;
</script>

<div class="flex flex-col items-center justify-center">
  <div class="max-w-4xl w-full">
    {#each timelineData as entry, i}
      <div class="relative border-l border-gray-700 pl-8 pb-12">
        {#if i == 0}
          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
        {:else}
          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
        {/if}
        <p class="text-sm opacity-70">{entry.duration}</p>

        <Collapsible open={i==0}>
          <span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
          <span slot="content">{@html entry.description}</span>
        </Collapsible>
      </div>
    {/each}
  </div>
</div>