<script lang="ts">
	import { statusInfo } from '$lib/status';

	let { status, linked = false }: { status: string | null; linked?: boolean } = $props();
	const info = $derived(statusInfo(status));
</script>

{#if linked && status}
	<a href="/ketten?status={status}" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {info.color} hover:opacity-80 transition-opacity">
		<span class="mr-1">{info.emoji}</span> {info.label}
	</a>
{:else}
	<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {info.color}">
		<span class="mr-1">{info.emoji}</span> {info.label}
	</span>
{/if}
