<script lang="ts">
  import {displayRelayUrl} from "@welshman/util"
  import {deriveRoom, splitRoomId} from "@app/core/state"

  type Props = {
    value: string
  }

  const {value}: Props = $props()
  const [url = "", h = ""] = splitRoomId(value)
  const room = deriveRoom(url, h)

  const label = $derived(`~${displayRelayUrl(url)} / ${$room.name || h}`)
</script>

<div class="max-w-full overflow-hidden text-ellipsis text-base font-semibold">
  {label}
</div>
