import './style.css'

const app = document.querySelector('#app');
if (!app) {
  console.error('App container not found');
  throw new Error('App container not found');
}

app.innerHTML = '<div class="spinner"></div>';

try {
  const response = await fetch('http://localhost:8080/api/posts');
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  
  const posts = await response.json();
  app.innerHTML = '';
  
  for (const post of posts) {
    const postHTML = `
    <div class="note">
      <img class="note-avatar" src="https://cdn.bsky.app/img/avatar/plain/did:plc:hyyqbqqhpxt2bnn7s2e2iuxd/bafkreidoiynom7v2y5rpsm467l3d2cnr7ozvlfusrchjey3k2jtyquufq4@jpeg" alt="avatar">
      <div class="note-content">
        <div style="font-weight: bold">@${post.authorHandle}</div>
        <div class="note-text">${post.text || '<br>'}</div>
        <div style="font-size: 12px; color: #888">${new Date(post.createdAt).toLocaleString()}</div>
      </div>
    </div>
  `;
    app.innerHTML += postHTML;
  }
} catch (err) {
  app.innerHTML = `<div style="color: #f88">error loading posts: ${err}</div>`;
}