<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

interface Props {
	personType: string;
}

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

const config = $derived.by(() => {
	switch (personType) {
		case 'INSTITUTION':
			return { label: m.person_type_INSTITUTION(), icon: 'building' as const };
		case 'GROUP':
			return { label: m.person_type_GROUP(), icon: 'people' as const };
		case 'UNKNOWN':
			return { label: m.person_type_UNKNOWN(), icon: 'question' as const };
		default:
			return null;
	}
});
</script>

{#if config}
	<span
		class="badge inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium"
		class:badge-institution={personType === 'INSTITUTION'}
		class:badge-group={personType === 'GROUP'}
		class:badge-unknown={personType === 'UNKNOWN'}
	>
		{#if config.icon === 'building'}
			<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-2M5 21H3m2 0v-2m4-12h2m-2 4h2m4-4h2m-2 4h2"
				/>
			</svg>
		{:else if config.icon === 'people'}
			<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
				/>
			</svg>
		{:else}
			<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01"
				/>
			</svg>
		{/if}
		{config.label}
	</span>
{/if}

<style>
.badge-institution {
	background-color: var(--c-badge-institution-bg);
	color: var(--c-badge-institution-text);
	border-color: var(--c-badge-institution-border);
}
.badge-group {
	background-color: var(--c-badge-group-bg);
	color: var(--c-badge-group-text);
	border-color: var(--c-badge-group-border);
}
.badge-unknown {
	background-color: var(--c-badge-unknown-bg);
	color: var(--c-badge-unknown-text);
	border-color: var(--c-badge-unknown-border);
}
</style>
