<script lang="ts">
	import type { Address } from '@upnd/upend/types';
	import UpObject from './UpObject.svelte';
	import UpLink from './UpLink.svelte';

	export let address: Address;
	let popup = false;
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<UpLink passthrough to={{ entity: address }}>
	<!-- svelte-ignore a11y-no-static-element-interactions -->
	<div
		class="surface-point"
		on:mouseover={() => (popup = true)}
		on:mouseleave={() => (popup = false)}
	>
		{#if popup}
			<div class="popup-inner">
				<UpObject {address} />
			</div>
		{/if}
	</div>
</UpLink>

<style lang="scss">
	@use '../../styles/colors.scss';

	.surface-point {
		display: relative;

		width: 0.75rem;
		height: 0.75rem;
		border-radius: 25%;
		background: colors.$red;
		box-shadow: 0 0 0 1px darken(colors.$red, 20%);

		cursor: pointer;
		&:hover {
			background: lighten(colors.$red, 20%);
		}
	}

	.popup-inner {
		position: relative;
		top: 1rem;
		display: inline-block;
		transform: translateX(-50%);
	}
</style>
