import { Yarndings_12 } from "next/font/google";
import { BurgerButtonIcon } from "../icons";

const filters = [
  "OPERASI KETUPAT 2025",
  "HUT HUMAS KE-74",
  "OPERASI ZEBRA 2025",
  "PER RILIS",
  "LIPUTAN KEGIATAN",
  "UNGKAP KASUS",
  "INFOGRAFIS",
  "SEPUTAR PRESTASI",
];

const filtersMedia = ["AUDIO VISUAL", "AUDIO", "FOTO ", "TEKS"];

export default function SidebarFilter() {
  return (
    <div>
      <div className="flex gap-2 items-center border-b-2 mb-3">
        <BurgerButtonIcon size={20} />
        <h2 className="font-semibold text-lg">Filters</h2>
      </div>
      <ul className="space-y-6 text-[16px] text-[#757575] border-b-2 mb-5">
        {filtersMedia.map((item, idx) => (
          <li key={idx} className="cursor-pointer hover:font-semibold mb-6">
            {item}
          </li>
        ))}
      </ul>
      <ul className="space-y-6 text-[16px] text-[#757575] ">
        {filters.map((item, idx) => (
          <li key={idx} className="cursor-pointer hover:font-semibold">
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}