"use client";

import DocumentCard from "@/components/document/document-card";
import FilterDocumentSidebar from "@/components/document/filter-sidebar";
import FloatingMenuNews from "@/components/landing-page/floating-news";
import Footer from "@/components/landing-page/footer";

import { useState } from "react";

export default function DocumentFilterPage() {
  const [openFilter, setOpenFilter] = useState(false);

  return (
    <div className="relative min-h-screen bg-white font-[family-name:var(--font-geist-sans)]">
      <section className=" min-h-screen py-10">
        <div className="container mx-auto px-6">
          {/* ===== TOP BAR ===== */}

          {/* ===== CONTENT ===== */}
          <div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8">
            {/* Sidebar */}
            <div className="hidden lg:block">
              <FilterDocumentSidebar />
            </div>

            {/* Mobile Sidebar */}
            {openFilter && (
              <div className="fixed inset-0 bg-black/40 z-50">
                <div className="absolute left-0 top-0 h-full w-[280px] bg-white p-6 overflow-y-auto">
                  <FilterDocumentSidebar />
                  <button
                    onClick={() => setOpenFilter(false)}
                    className="mt-4 text-sm text-[#966314]"
                  >
                    Tutup
                  </button>
                </div>
              </div>
            )}

            {/* Cards */}
            <div>
              <div className="flex items-center justify-between mb-8">
                <div className="text-sm text-gray-500">
                  Document &nbsp; &gt; &nbsp;
                  <span className="font-semibold text-black">Lihat Semua</span>
                  <span className="font-semibold text-black ml-3">{"|"}</span>
                  <span className="ml-4 text-gray-400">
                    Terdapat 1636 berita
                  </span>
                </div>

                <div className="flex items-center gap-4">
                  <span className="text-sm">Urutkan:</span>
                  <select className="border rounded-md px-3 py-2 text-sm mr-20">
                    <option>Terpopuler</option>
                    <option>Terbaru</option>
                  </select>
                  <FloatingMenuNews />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {Array.from({ length: 6 }).map((_, i) => (
                  <DocumentCard key={i} />
                ))}
              </div>
            </div>
          </div>

          {/* ===== PAGINATION ===== */}
          <div className="flex justify-center items-center gap-3 mt-12 text-sm">
            <button className="px-3 py-1 bg-black text-white rounded">1</button>
            <button className="px-3 py-1 bg-white border rounded">2</button>
            <span>...</span>
            <button className="px-3 py-1 bg-white border rounded">4</button>
            <button className="ml-4">Selanjutnya &gt;</button>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}
