<script lang="ts">
	import { ApiURL } from '../misc/guestbook.svelte';
	export let link = '';

	async function isOnline(link: string) {
		const res = await fetch(ApiURL + '/checkonline', {
			method: 'POST',
			body: JSON.stringify({
				url: link
			})
		})
			.then((res) => res.json())
			.then((data) => {
				return data;
			});

		if (res.status) {
			return true;
		}
		return false;
	}
</script>

<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
	<div class="rounded-t bg-slate-400 flex dark:bg-slate-700 min-h-fit px-3 py-1">
		<div class="grow">
			<a href={link} class="underline underline-offset-1 hover:underline-offset-4"><slot name="title" /></a>
		</div>
		<div class="w-fit">
			{#await isOnline(link)}
				<span class="text-yellow-300">Waiting</span>
			{:then status}
				{#if status}
					<span class="text-green-400">Online</span>
				{:else}
					<span class="text-red-500">Offline</span>
				{/if}
			{:catch error}
				<span class="text-red-500">Error</span>
			{/await}
		</div>
	</div>
	<div class="px-3 py-2">
		<p class=""><slot name="text" /></p>
	</div>
</div>