<script lang="ts">
	import { traits, useTrait } from '../../ecs'
	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
	import { useFocusedEntity } from '../../hooks/useSelection.svelte'

	import HoveredEntity from './HoveredEntity.svelte'
	import LinkedHoveredEntity from './LinkedHoveredEntity.svelte'

	const selectedEntity = useSelectedEntity()
	const focusedEntity = useFocusedEntity()
	const linkedEntities = useLinkedEntities()

	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
	const isHovered = useTrait(() => displayEntity, traits.Hovered)
</script>

{#if isHovered}
	<HoveredEntity />

	{#each linkedEntities.current as entity (entity)}
		<LinkedHoveredEntity linkedEntity={entity} />
	{/each}
{/if}
