---
import Layout from "../layouts/Layout.astro";
import GetData from "../components/GetData.vue"
const fetchData = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/');
const dataJSON = await fetchData.json();
const data = dataJSON.data;
console.log(data);
---
<Layout title="">
    <main>
        <div>
            <section class="container mx-auto px-4">
                <GetData client:visible />
                <p>News List</p>
                <div>
                    <button onclick="getData();">Get Data</button>
                    <p id="dataID"></p>
                </div>
            </section>
        </div>
    </main>
</Layout>
<script is:inline>
    function getData(){
        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en`)
        .then(data => data.json())
        .then(data => {
            console.log(data)
        })
        .catch(error => {
            console.error("an error occoured", error)
        })
        // fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en')
        //     .then(response => {
        //         if (!response.ok) {
        //         throw new Error('Network response was not ok');
        //         }
        //         return response.json();
        //     })
        //     .then(data => {
        //         // Handle the JSON response data
        //         console.log(data);
        //     })
        //     .catch(error => {
        //         // Handle any errors that occurred during the fetch
        //         console.error('Fetch error:', error);
        //     });
    }
</script>