<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)
</script>

<div class="flex max-w-full flex-col gap-1">
  <div class="overflow-hidden text-ellipsis text-base font-semibold">~{$room.name || h}</div>
  <div class="overflow-hidden text-ellipsis text-sm opacity-75">{displayRelayUrl(url)}'{h}</div>
</div>
