<script lang="ts">
	import { Globe, Database, Layers } from 'lucide-svelte';

	export let level: 'global' | 'tenant' | 'company';
	export let size: 'sm' | 'md' = 'md';

	const config = {
		global: {
			label: 'Global',
			icon: Globe,
			color: 'text-primary bg-primary/10 border-primary/20'
		},
		tenant: {
			label: 'Tenant',
			icon: Database,
			color: 'text-blue-400 bg-blue-400/10 border-blue-400/20'
		},
		company: {
			label: 'Company',
			icon: Layers,
			color: 'text-purple-400 bg-purple-400/10 border-purple-400/20'
		}
	};

	$: current = config[level];
</script>

<div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border {current.color} {size === 'sm' ? 'text-[10px]' : 'text-xs'} font-medium">
	<svelte:component this={current.icon} class={size === 'sm' ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
	{current.label.toUpperCase()}
</div>
