<script lang="ts">
  import Header from '../../../lib/components/layout/Header.svelte';
  import PageHeader from '../../../lib/components/layout/PageHeader.svelte';
  import ProfilePage from '../../../lib/modules/profiles/ProfilePage.svelte';
  import { nostrClient } from '../../../lib/services/nostr/nostr-client.js';
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  import { nip19 } from 'nostr-tools';

  let profilePageComponent: { refresh?: () => Promise<void> } | null = $state(null);

  async function handleRefresh() {
    if (profilePageComponent?.refresh) {
      await profilePageComponent.refresh();
    }
  }

  onMount(async () => {
    await nostrClient.initialize();
  });
</script>

<Header />

<main class="container mx-auto px-2 sm:px-4 py-4 sm:py-8">
  <PageHeader title="Profile" onRefresh={handleRefresh} />
  <ProfilePage bind:this={profilePageComponent} />
</main>
