<script lang="ts">
    export let timelineData: any;

	import Timeline from '$lib/components/timeline/Timeline.svelte';
	import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
	import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
	import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
	import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
	import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
	import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
</script>

<Timeline
	position="alternate"
	style={`
  border-radius: 3%;
  padding: 1rem;
  `}
>
	{#each timelineData as item}
		<TimelineItem>
			<TimelineOppositeContent slot="opposite-content">
				<p class="oposite-content-title">{item.duration}</p>
			</TimelineOppositeContent>

			<TimelineSeparator>
				{#if item.duration.includes('Present') || !item.duration.includes('-')}
					<div class="elementToFadeInAndOut">
						<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
					</div>
				{:else}
					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
				{/if}
				<TimelineConnector />
			</TimelineSeparator>
			<TimelineContent>
				<h3 class="content-title">{item.title}</h3>
				<p class="content-description">{@html item.description}</p>
			</TimelineContent>
		</TimelineItem>
	{/each}
</Timeline>

<style>
	.oposite-content-title {
		margin: 0;
		padding: 0;
		color: var(--bg-grad-2);
	}
	.content-title {
		margin: 0;
		padding: 0;
	}

	.content-description {
		margin: 0;
		padding: 0;
		margin-top: 1rem;
		color: var(--fg);
		font-weight: lighter;
		padding: 0.5rem 0;
	}
</style>