document.addEventListener('DOMContentLoaded', () => {
    const feedContainer = document.getElementById('feed-container');
    
    // Mock Data Generation using Real Public APIs structure
    async function fetchPosts() {
        try {
            // Fetching random users to simulate posts
            const response = await fetch('https://randomuser.me/api/?results=5');
            const data = await response.json();
            
            feedContainer.innerHTML = ''; // Clear loader
            
            data.results.forEach((user, index) => {
                // Generate Post Data
                const postData = {
                    name: `${user.name.first} ${user.name.last}`,
                    avatar: user.picture.large,
                    time: `${Math.floor(Math.random() * 12) + 1}h`,
                    content: `Just had an amazing experience today! Can't believe how fast technology is evolving. #Life #GoodVibes`,
                    image: `http://static.photos/${getRandomCategory()}/640x360/${Math.floor(Math.random() * 100)}`,
                    likes: Math.floor(Math.random() * 500) + 10,
                    comments: Math.floor(Math.random() * 50) + 1
                };
                
                // Create Custom Element
                const postElement = document.createElement('post-card');
                postElement.setAttribute('data-name', postData.name);
                postElement.setAttribute('data-avatar', postData.avatar);
                postElement.setAttribute('data-time', postData.time);
                postElement.setAttribute('data-content', postData.content);
                postElement.setAttribute('data-image', postData.image);
                postElement.setAttribute('data-likes', postData.likes);
                postElement.setAttribute('data-comments', postData.comments);
                
                feedContainer.appendChild(postElement);
            });
            
            // Refresh icons for new elements
            feather.replace();

        } catch (error) {
            console.error('Error fetching posts:', error);
            feedContainer.innerHTML = '<p class="text-center text-red-500">Failed to load posts. Please refresh.</p>';
        }
    }

    function getRandomCategory() {
        const categories = ['nature', 'cityscape', 'technology', 'food', 'workspace', 'travel'];
        return categories[Math.floor(Math.random() * categories.length)];
    }

    fetchPosts();
});