<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-xl tracking-tight md:text-2xl">{title} @ {company}</h2>
		<p class="text-xs text-slate-400 md:text-sm">{start} - {end}</p>
	</div>
	<h3 class="mt-6 text-xl md:text-2xl">Job Description</h3>
	<p class="mt-4">
		{jobDescription}
	</p>
	<h3 class="mt-6 text-xl md:text-2xl">Accomplishments</h3>
	<ul class="mt-4 list-outside list-disc">
		{#each accomplishments as accomplishment, i (i)}
			<li class="mt-4 md:text-xl">
				<span class="underline md:no-underline">{accomplishment.title}</span>
				<p class="mt-1 text-base md:mt-2">{accomplishment.description}</p>
				<div class="mt-2 flex gap-2 overflow-x-scroll">
					{#each accomplishment.tags as tag, i (`${tag}-${i}`)}
						<Badge>{tag}</Badge>
					{/each}
				</div>
			</li>
		{/each}
	</ul>
</Card>
