"use client";

import AudioCard from "@/components/audio/audio-card";
import FilterAudioSidebar from "@/components/audio/filter-sidebar";
import FilterImageSidebar from "@/components/image/filter-sidebar";
import ImageCard from "@/components/image/image-card";
import FloatingMenuNews from "@/components/landing-page/floating-news";
import Footer from "@/components/landing-page/footer";
import FilterSidebar from "@/components/video/filter-sidebar";
import VideoCard from "@/components/video/video-card";
import { Menu } from "lucide-react";
import { useState } from "react";

export default function ImageFilterPage() {
  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">
          <div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8">
            <div className="hidden lg:block">
              <FilterImageSidebar />
            </div>

            {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">
                  <FilterImageSidebar />
                  <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">
                  Foto &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="">
                {Array.from({ length: 1 }).map((_, i) => (
                  <ImageCard key={i} />
                ))}
              </div>
            </div>
          </div>

          <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>
  );
}
