---
import { JSDOM } from 'jsdom';

const fetchContent = async (url) => {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`Failed to fetch RSS feed: ${response.statusText}`);
        }
        return await response.text();
    } catch (error) {
        console.error(error);
        return '<rss></rss>';
    }
};

const rssData = await fetchContent(Astro.props.url);

// Parse the RSS data
const dom = new JSDOM(rssData);
const xmlDoc = dom.window.document;
const items = Array.from(xmlDoc.querySelectorAll("item")).slice(0, 7); // Only take the first 5 items

const title = xmlDoc.querySelector("title").textContent;
const link = xmlDoc.querySelector("link").textContent;
const description = xmlDoc.querySelector("description").textContent;
---

<style>
    body {
        font-family: Arial, sans-serif;
    }
    header {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        border-bottom: 1px solid #444;
        padding: 10px 0;
        transition: background-color 0.3s;
    }
    li:hover {
        background-color: #3a3a3a;
    }
    a {
        color: #f9a825;  
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    time {
        color: #888;
        font-size: 0.85em;
    }
</style>

<ul>
    {items.map(item => {
        return (
            <li key={item.querySelector("guid").textContent}>
                <a href={item.querySelector("guid").textContent}>{item.querySelector("title").textContent}</a>
                <p>{item.querySelector("description").textContent}</p>
                <time>{item.querySelector("pubDate").textContent}</time>
            </li>
        );
    })}
</ul>