<script lang="ts">
	import Badge from './Badge.svelte';
	import Card from './Card.svelte';
	import type { Accomplishment } from './types';

	type ComponentProps = {
		title: string;
		company: string;
		start: string;
		end: string;
		jobDescription: string;
		accomplishments: Accomplishment[];
	};
	let { title, company, start, end, jobDescription, accomplishments }: ComponentProps = $props();
</script>

<Card>
	<div class="flex items-center gap-4">
		<h2 class="mb-2 text-2xl tracking-tight">{title} @ {company}</h2>
		<p class="text-sm text-slate-400">{start} - {end}</p>
	</div>
	<h3 class="mt-6 text-2xl">Job Description</h3>
	<p class="mt-4">
		{jobDescription}
	</p>
	<h3 class="mt-6 text-2xl">Accomplishments</h3>
	<ul class="mt-4 list-inside list-disc">
		{#each accomplishments as accomplishment, i (i)}
			<li class="mt-4 text-xl">
				<span>{accomplishment.title}</span>
				<p class="ml-5 text-base">{accomplishment.description}</p>
				<div class="mt-2 ml-5 flex gap-2">
					{#each accomplishment.tags as tag, i (`${tag}-${i}`)}
						<Badge>{tag}</Badge>
					{/each}
				</div>
			</li>
		{/each}
	</ul>
</Card>
