<script>
	import { AccordionItem } from 'flowbite-svelte';
	import moment from 'moment';
	export let index;
	export let link;
	export let title;
	export let description;
	export let published;
	const pubAgo = moment(published).fromNow();
	const open = index === 0;
</script>

<AccordionItem borderSharedClass="border-slate-400" {...open ? { open: true } : {}}>
	<span slot="header" class="flex justify-between items-center w-full">
		<h3>{@html title}</h3>
		<p class="text-xs mr-2">{pubAgo}</p>
	</span>
	<div class="flex flex-col">
		{#if description}
			<p>with the message:</p>
			<code class="overflow-x-clip">{@html description}</code>
		{/if}
		<a class="hover:text-slate-100" href={link}>view commit for more details</a>
	</div>
</AccordionItem>
