// src/pages/experience.tsx

import { getAllTags, getSortedPostsData } from "@/lib/posts";
import { FilterableExperienceGrid } from "@/components/filterable-experience-list";

export default function ExperiencePage() {
  const posts = getSortedPostsData("experience");

  const allPosts = posts.filter((post) => post.title);
  const allTags = getAllTags(5, "experience").filter((tag) => (tag.name === "project" || tag.name === "teaching"));

  return (
    <main className="flex flex-col min-h-[100dvh] space-y-10">
      <section id="projects-list">
        <div className="mx-auto w-full max-w-6xl space-y-8">
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
              Experience
            </h1>
            <p className="text-muted-foreground">
            My professional experience encompasses both hands-on systems engineering and academic instruction. I&apos;ve worked at the intersection of machine learning and complex systems, with projects ranging from exploring emergent behavior in AI to managing cluster infrastructure. In my role at <b><a href="https://www.mobile.ifi.lmu.de/team/steffen-illium/">LMU Munich</a></b>, I further developed this experience by mentoring students, contributing to lectures, and leading practical seminars.<br/>
            </p>
          </div>
          <hr />
          <FilterableExperienceGrid posts={allPosts} tags={allTags} />

        </div>
      </section>
    </main>
  );
}