<script setup>
import Card from '@/components/cards/Card.vue';
import { useP2postStore } from '../stores/p2postStore';
import InputComboBox from '@/components/inputs/InputComboBox.vue';
import { ClockIcon, FunnelIcon, HashtagIcon } from '@heroicons/vue/24/solid';

const p2postStore = useP2postStore()
</script>

<template>
<Card class="bg-black border-yellow-400/20 p-6">
<div class="flex items-center justify-between mb-6">
    <h2 class="text-xl font-bold text-yellow-400 flex items-center">
    <HashtagIcon class="mr-2 h-5 w-5" />
    Feed
    </h2>

    <div class="flex items-center space-x-2">
    <FunnelIcon class="text-gray-400 h-5 w-5" />
    <InputComboBox></InputComboBox>
    </div>
</div>

<div class="space-y-4">
    <div key={post.id} class="bg-black border border-yellow-400/20 rounded-lg p-4">
        <div class="flex items-start justify-between mb-3">
        <div class="flex items-center space-x-3">
            <!-- <img src={post.photo || "/placeholder.svg"} alt="" class="w-12 h-12 rounded-full" /> -->
            <div>
            <div class="flex items-center space-x-2">
                <span class="text-white font-semibold">{post.nickname}</span>
                <div class="flex items-center space-x-1">
                <Shield size={14} class="text-yellow-400" />
                <span class="text-yellow-400 text-sm">PoW: {post.powDifficulty}</span>
                </div>
            </div>
            <p class="text-xs text-gray-400 font-mono">{post.userPublicKey}</p>
            </div>
        </div>

        <div class="flex items-center space-x-1 text-gray-400 text-sm">
            <ClockIcon class="h-4 w-4"/>
            <span>{new Date(post.postedAt).toLocaleString()}</span>
        </div>
        </div>

        <div class="mb-3">
        <p class="text-white leading-relaxed">{post.content}</p>
        </div>

        
        <div class="mb-3">
            FILES
        </div>

        <div class="flex flex-wrap gap-2">
        
            <span key={network} class="bg-yellow-400 text-black text-sm px-2 py-1 rounded-full">
            {network}
            </span>
        </div>
    </div>
</div>
</Card>
<!-- <div v-for="post in p2postStore.posts.value" :key="post.hash" class="bg-gray-800 p-4 rounded-xl shadow mb-4">
    <div class="flex items-center space-x-3 mb-2">
        <img :src="post.author.avatar" class="w-8 h-8 rounded-full" alt="Avatar" />
        <div>
            <p class="text-sm font-semibold">{{ post.author.nickname }}</p>
            <p class="text-xs text-gray-400">{{ formatTimestamp(post.timestamp) }}</p>
        </div>
    </div>
    <p class="text-gray-200 whitespace-pre-wrap">{{ post.content }}</p>
    <div v-for="media in post.media">
        <img v-if="media.type === 'external'" :src="media.url" class="mt-2 rounded max-h-60" alt="Media" />
        <img v-if="media.type === 'local'" :src="media.file_path" class="mt-2 rounded max-h-60" alt="Media" />
    </div>
</div> -->
</template>