---
import Layout from "../../layouts/Layout.astro";
import TopicsList from "../../components/Topics";

const TOPIC_API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/topics/';
let topics = [];

try {
  const response = await fetch(`${TOPIC_API_URL}?query=get-all-topics`, {
    method: 'GET',
    credentials: 'include',
  });

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

  const data = await response.json();
  topics = data.data || [];
  console.log('Topic Data', data);
} catch (error) {
  console.error('An error occurred', error);
}
---

<Layout title="Topics">
  <TopicsList client:load topics={topics} />
</Layout>