"use client"

import { useState } from "react"
import { BLOG_POSTS, BLOG_CATEGORIES } from "@/lib/blog-data"
import BlogCard from "@/components/BlogCard"

export default function PostsGridSection() {
  const [activeCategory, setActiveCategory] = useState<(typeof BLOG_CATEGORIES)[number]>(BLOG_CATEGORIES[0])

  const filtered = activeCategory === BLOG_CATEGORIES[0]
    ? BLOG_POSTS
    : BLOG_POSTS.filter((p) => p.category === activeCategory)

  return (
    <section className="section">
      <div className="w-layout-blockcontainer container-default w-container">
        <div data-w-id="41a231e8-d013-bd0a-0639-c179719a51f6" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right align-center">
          <h2>全部文章</h2>
          <div className="category-list-wrapper">
            <div role="list" className="category-list">
              {BLOG_CATEGORIES.map((cat) => (
                <button
                  key={cat}
                  className={`category-link${activeCategory === cat ? " w--current" : ""}`}
                  onClick={() => setActiveCategory(cat)}
                  type="button"
                  aria-pressed={activeCategory === cat}
                >
                  {cat}
                </button>
              ))}
            </div>
          </div>
        </div>
        <div className="mg-top-regular">
          <div data-w-id="e99a5296-8389-ce52-d99c-66f9d94e1815" style={{ opacity: "0", filter: "blur(8px)" }} className="w-dyn-list">
            {filtered.length > 0 ? (
              <div role="list" className="blog-v1-grid w-dyn-items">
                {filtered.map((post) => (
                  <BlogCard key={post.slug} post={post} variant="grid" />
                ))}
              </div>
            ) : (
              <div className="inner-container _430px">
                <p>这个分类下的内容还在整理中，先看看其他文章。</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}