<template>
  <div class="content-list">
    <div v-if="loading">Loading...</div>
    <div v-else-if="error" class="error">Error: {{ error }}</div>
    <article 
      v-else 
      v-for="item in content" 
      :key="item.id" 
      class="content-item"
    >
      <h2>{{ item.title }}</h2>
      <p>By {{ item.author }} • {{ formatDate(item.created_at) }}</p>
      <div class="content-preview">
        {{ item.excerpt }}
      </div>
    </article>
  </div>
</template>

<script>
import { ApiClient } from '@oscarrondon/api-client';

const client = new ApiClient({ 
  apiKey: process.env.VUE_APP_API_KEY 
});

export default {
  name: 'ContentList',
  data() {
    return {
      content: [],
      loading: true,
      error: null
    };
  },
  async mounted() {
    try {
      const response = await client.content.list({
        type: 'blog',
        status: 'published',
        limit: 10
      });
      this.content = response.data;
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  },
  methods: {
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString();
    }
  }
};
</script>

class ContentManager {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseURL = 'https://api.oscarrondon.com/v1';
  }

  async fetchContent() {
    const container = document.getElementById('content-container');
    
    try {
      container.innerHTML = '<div class="loading">Loading...</div>';
      
      const response = await fetch(`${this.baseURL}/content?type=blog&status=published&limit=10`, {
        headers: {
          'Authorization': `Bearer ${this.apiKey}`,
          'Content-Type': 'application/json'
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      this.renderContent(data.data);
    } catch (error) {
      container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
    }
  }

  renderContent(content) {
    const container = document.getElementById('content-container');
    
    const html = content.map(item => `
      <article class="content-item">
        <h2>${this.escapeHtml(item.title)}</h2>
        <p>By ${this.escapeHtml(item.author)} • ${new Date(item.created_at).toLocaleDateString()}</p>
        <div class="content-preview">
          ${this.escapeHtml(item.excerpt)}
        </div>
      </article>
    `).join('');
    
    container.innerHTML = html;
  }

  escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
}

// Usage
const contentManager = new ContentManager('your-api-key');
contentManager.fetchContent();