<script lang="ts">
import {
	formatDocumentStatus,
	statusDotClass,
	type DocumentStatus
} from '$lib/document/documentStatusLabel';

type Props = {
	status: DocumentStatus;
};

let { status }: Props = $props();

const dotClass = $derived(statusDotClass(status));
const label = $derived(formatDocumentStatus(status));
</script>

<span
	class="hidden shrink-0 md:block {dotClass} h-4 w-4 rounded-full"
	title={label}
	aria-label={label}
></span>
