<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		variant?: 'default' | 't-side' | 'ct-side' | 'success' | 'warning' | 'error' | 'info';
		size?: 'sm' | 'md' | 'lg';
		class?: string;
		children: Snippet;
	}

	let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();

	const baseClasses = 'inline-flex items-center justify-center font-medium border rounded';

	const variantClasses = {
		default: 'bg-base-300/50 border-base-content/20 text-base-content',
		't-side':
			'bg-terrorist/10 border-terrorist/30 text-terrorist-light backdrop-blur-sm font-semibold',
		'ct-side': 'bg-ct/10 border-ct/30 text-ct-light backdrop-blur-sm font-semibold',
		success: 'bg-success/10 border-success/30 text-success',
		warning: 'bg-warning/10 border-warning/30 text-warning',
		error: 'bg-error/10 border-error/30 text-error',
		info: 'bg-info/10 border-info/30 text-info'
	};

	const sizeClasses = {
		sm: 'px-2 py-0.5 text-xs',
		md: 'px-2.5 py-1 text-sm',
		lg: 'px-3 py-1.5 text-base'
	};

	const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
</script>

<span class={classes}>
	{@render children()}
</span>
