<script lang="ts">
	import { CheckCircle2, XCircle, AlertCircle, Plus, Video } from 'lucide-svelte';

	interface Props {
		status?: 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao';
		size?: 'sm' | 'md' | 'lg';
	}

	let { status = 'offline', size = 'md' }: Props = $props();

	const sizeClasses = {
		sm: 'w-3 h-3',
		md: 'w-4 h-4',
		lg: 'w-5 h-5'
	};

	const iconSizes = {
		sm: 8,
		md: 12,
		lg: 16
	};

	const statusConfig = {
		online: {
			color: 'bg-success',
			borderColor: 'border-success',
			icon: CheckCircle2,
			label: '🟢 Online'
		},
		offline: {
			color: 'bg-base-300',
			borderColor: 'border-base-300',
			icon: XCircle,
			label: '⚫ Offline'
		},
		ausente: {
			color: 'bg-warning',
			borderColor: 'border-warning',
			icon: AlertCircle,
			label: '🟡 Ausente'
		},
		externo: {
			color: 'bg-info',
			borderColor: 'border-info',
			icon: Plus,
			label: '🔵 Externo'
		},
		em_reuniao: {
			color: 'bg-error',
			borderColor: 'border-error',
			icon: Video,
			label: '🔴 Em Reunião'
		}
	};

	const config = $derived(statusConfig[status]);
	const IconComponent = $derived(config.icon);
	const iconSize = $derived(iconSizes[size]);
</script>

<div
	class={`${sizeClasses[size]} ${config.color} ${config.borderColor} relative flex items-center justify-center rounded-full border-2`}
	style="box-shadow: 0 2px 8px rgba(0,0,0,0.15);"
	title={config.label}
	aria-label={config.label}
>
	<IconComponent class="text-white" size={iconSize} strokeWidth={2.5} fill="currentColor" />
</div>
