<script setup>
import { ref } from 'vue';
import { p2postApi } from '../api/p2postApi'
import CreatePost from '../components/CreatePost.vue'
import SideBar from '../components/SideBar.vue';
import Feed from '../components/Feed.vue'
import { useP2postStore } from '../stores/p2postStore';

const p2postStore = useP2postStore()

</script>

<template>
  <div class="min-h-screen bg-black text-yellow-400">
    <header class="border-b border-yellow-400/20 py-6">
      <div class="container mx-auto px-6">
        <div class="flex items-center space-x-4">
          <div class="text-3xl font-black">
            <span class="text-yellow-400">P2</span>
            <span class="text-white">POST</span>
          </div>
          <div class="w-1 h-8 bg-yellow-400"></div>
          <span class="text-gray-400">Decentralized Social Media</span>
        </div>
      </div>
    </header>

    <div class="flex min-h-screen">
      <SideBar/>
      <div class="flex-1 p-6 space-y-6">
        <CreatePost/>
        <Feed/>
      </div>
    </div>

  </div>

  
  <!-- <div class="flex h-screen bg-gray-900 text-white">
    <SideBar/>
    <main class="flex-1 p-6 overflow-y-auto">
      <div class="max-w-2xl mx-auto">
        <CreatePost/>
        <Feed/>
      </div>
    </main>
  </div> -->
</template>

<style>
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #111827;
  color: white;
}
</style>
