"use client";
import { useState } from "react";
import CategoryTabs from "./category-tabs";
import PublicationCardGrid from "./publication-card";
import SidebarFilter from "./sidebar-filter";

export default function PublicationKlLayout() {
  const [selectedCategory, setSelectedCategory] = useState("SEMUA");

  return (
    <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
      <CategoryTabs
        selectedCategory={selectedCategory}
        onCategoryChange={setSelectedCategory}
      />

      <div className="flex flex-col lg:flex-row gap-6">
        <div className="lg:w-1/4 xl:w-1/5 w-full">
          <div className="border rounded p-4 bg-white">
            <SidebarFilter />
          </div>
        </div>

        <div className="flex-1">
          <PublicationCardGrid selectedCategory={selectedCategory} />
        </div>
      </div>
    </div>
  );
}