<script lang="ts">
	interface Props {
		titleWidth?: string;
		showBadge?: boolean;
	}

	let { titleWidth = 'w-48', showBadge = false }: Props = $props();
</script>

<div class="flex w-full items-start gap-3 rounded-lg px-3 py-2">
	<div class="min-w-0 flex-1 space-y-2">
		<!-- Server label skeleton -->
		<div class="mb-2 flex items-center gap-1.5">
			<div class="h-3 w-3 shrink-0 animate-pulse rounded-sm bg-muted"></div>
			<div class="h-3 w-24 animate-pulse rounded bg-muted"></div>
		</div>

		<!-- Title skeleton -->
		<div class="flex items-center gap-2">
			<div class="h-4 {titleWidth} animate-pulse rounded bg-muted"></div>

			{#if showBadge}
				<div class="h-4 w-12 animate-pulse rounded-full bg-muted"></div>
			{/if}
		</div>

		<!-- Description skeleton -->
		<div class="h-3 w-full animate-pulse rounded bg-muted"></div>
	</div>
</div>
