---
import Layout from "../../layouts/Layout.astro";
import { getCollection } from "astro:content";
import { getCategory } from "../../utils/notes";
import NotesSearch from "../../components/NotesSearch.svelte";

const notes = await getCollection("notes");
const sortedNotes = notes.sort(
  (a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime(),
);

const searchNotes = sortedNotes.map((n) => ({
  id: n.id,
  title: n.data.title,
  description: n.data.description,
  tags: n.data.tags,
  category: getCategory(n),
  searchText: [n.data.title, n.data.description, n.body ?? ""]
    .join(" ")
    .toLowerCase(),
}));
---

<Layout
  title="Security Notes — Another Hadi"
  description="Reference notes on cybersecurity tools and techniques."
>
  <main class="max-w-4xl mx-auto px-4 py-16 sm:py-20">
    <div class="text-center mb-12">
      <h1 class="text-4xl sm:text-5xl font-bold mb-4">Notes</h1>
      <p class="text-xl text-base-content/70">
        Reference sheets on cybersecurity tools and techniques.
      </p>
    </div>
    <NotesSearch client:load notes={searchNotes} />
  </main>
</Layout>
