<template>
	<li class="grid md:grid-cols-6 md:gap-1 mt-2 md:mt-0">
		<div class="md:col-span-1 text-center md:text-left text-slate-600">
			{{ date }}
		</div>
		<div class="md:col-span-5 text-center md:text-left">
			<span
				class="font-bold"
				v-if="title"
			>
				{{ title }}
			</span>
			<ul
				v-if="missions"
				:aria-description="t('Missions réalisées')"
			>
				<li
					v-for="mission in missions"
					:key="mission"
				>
					{{ mission }}
				</li>
			</ul>
			<div
				v-if="technos"
				class="text-left text-slate-700 font-mono"
			>
				<i
					class="fab fa-envira text-slate-500 mr-1"
					aria-hidden="true"
				></i>
				<p
					class="inline"
					:aria-description="t('Technologies utilisées')"
				>
					{{ technos.join(", ") }}
				</p>
			</div>
		</div>
	</li>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
defineProps<Props>();
const { t } = useI18n();
</script>

<script lang="ts">
export interface Props {
	date: string;
	title?: string;
	missions?: string[];
	technos?: string[];
}
</script>
