<script lang="ts">
  import type { Address } from "@upnd/upend/types";
  import UpObject from "./UpObject.svelte";
  import { useNavigate } from "svelte-navigator";
  const navigate = useNavigate();

  export let address: Address;
  let popup = false;

  function visit() {
    navigate(`/browse/${address}`);
  }
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
  class="surface-point"
  class:popup
  on:mouseover={() => (popup = true)}
  on:mouseleave={() => (popup = false)}
  on:click={visit}
>
  {#if popup}
    <div class="popup-inner">
      <UpObject {address} />
    </div>
  {/if}
</div>

<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 {
      z-index: 9999;
    }
  }

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