<script lang="ts">
import { statusDotClass, statusLabel } from '$lib/utils/personFormat';

type DocumentStatus = 'PLACEHOLDER' | 'UPLOADED' | 'TRANSCRIBED' | 'REVIEWED' | 'ARCHIVED';

type Props = {
	status: DocumentStatus;
};

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

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

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