<script lang="ts">
	import md5 from 'md5';
	import Link from './Link.svelte';

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

<div class="flex flex-row gap-4 items-center rounded-xl bg-gray-800 p-4">
	<img class="rounded-2xl w-16 h-16" src={image} alt="" />
	<div class="grow flex flex-col">
		<p class="text-white font-title text-xl">{name}</p>
		<p class="text-gray-300 font-sans text-xl break-words">{description}</p>
	</div>
	<Link {url} />
</div>
