<script lang="ts">
  import Header from '../lib/components/layout/Header.svelte';
  import ThreadList from '../lib/modules/threads/ThreadList.svelte';
  import SearchBox from '../lib/components/layout/SearchBox.svelte';
  import { nostrClient } from '../lib/services/nostr/nostr-client.js';
  import { onMount } from 'svelte';

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

<Header />

<main class="container mx-auto px-4 py-8">
  <div class="threads-header mb-4">
    <div>
      <h1 class="text-2xl font-bold mb-4 text-fog-text dark:text-fog-dark-text">Threads</h1>
      <p class="mb-4 text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr. Brought to you by <a href="/profile/fd208ee8c8f283780a9552896e4823cc9dc6bfd442063889577106940fd927c1" class="text-fog-accent dark:text-fog-dark-accent hover:text-fog-text dark:hover:text-fog-dark-text underline transition-colors">Silberengel</a>.</p>
    </div>
  </div>

  <div class="search-section mb-6">
    <SearchBox />
  </div>

  <ThreadList />
</main>

<style>
  main {
    max-width: var(--content-width);
    margin: 0 auto;
  }

  .threads-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
</style>
