<script lang="ts">
  import {removeUndefined} from "@welshman/lib"
  import type {ProfilePointer} from "@welshman/content"
  import {app} from "@app/welshman"
  import {Profiles} from "@welshman/app"
  import Button from "@lib/components/Button.svelte"
  import ProfileDetail from "@app/components/ProfileDetail.svelte"
  import {pushModal} from "@app/modal"

  type Props = {
    value: ProfilePointer
    url?: string
  }

  const {value, url}: Props = $props()

  const display = app.use(Profiles).display(value.pubkey, removeUndefined([url])).$

  const openProfile = () => pushModal(ProfileDetail, {pubkey: value.pubkey, url})
</script>

<Button onclick={openProfile} class="link-content">
  @{$display}
</Button>
