<script lang="ts">
	import md5 from 'md5';

	export let name: string;
	export let email: string;
	export let description: string;
	export let url: string | null = null;
	export let fedi: string | null = null;
	export let youtube: string | null = null;
	const image = `http://www.gravatar.com/avatar/${md5(email)}`;
</script>

<div class="flex flex-row gap-4 items-center p-4">
	<a href={url}><img class="w-16 h-16" src={image} alt="" /></a>
	<div class="grow flex flex-col">
		<p class="text-text font-title text-xl">{name}</p>
		<p class="text-text/70 text-md break-words">{description}</p>
		<div class="flex flex-row gap-2 text-sm">
			{#if url}
				<a
					class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
					href={url}>Website</a
				>
			{/if}
			{#if fedi}
				<a
					class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
					href={fedi}>Fediverse</a
				>
			{/if}
			{#if youtube}
				<a
					class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
					href={youtube}>Youtube</a
				>
			{/if}
		</div>
	</div>
</div>
