---
import PostCard from "../components/PostCard.astro";
import Layout from "../layouts/Layout.astro";
import "../styles/index.css";
import { getCollection } from "astro:content";

const posts = (await getCollection("blog")).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

<Layout>
  {posts.map((post) => <PostCard id={post.id} title={post.data.title}, description={post.data.description} pubDate={post.data.pubDate} updatedDate={post.data.updatedDate} illustration={post.data.illustration} />)}
<script>
    document.addEventListener('DOMContentLoaded', () => {
      const searchBar = document.getElementById('searchBar') as HTMLInputElement | null;
      
      const posts = document.querySelectorAll('article'); 

      if (searchBar) {
        searchBar.addEventListener('input', (e) => {
          const target = e.target as HTMLInputElement;
          const term = target.value.toLowerCase();

          posts.forEach((post) => {
            const text = post.textContent?.toLowerCase() || '';
            
            if (text.includes(term)) {
              (post as HTMLElement).style.display = ''; 
            } else {
              (post as HTMLElement).style.display = 'none'; 
            }
          });
        });
      }
    });
  </script>
</Layout>