"use client";

import { ChevronLeft } from "lucide-react";

export default function FilterAudioSidebar() {
  return (
    <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
      {/* HEADER */}
      <div className="flex items-center justify-between pb-4 border-b">
        <h3 className="font-semibold text-sm flex items-center gap-2">
          Filter
        </h3>
        <ChevronLeft size={16} className="text-gray-400" />
      </div>

      {/* CONTENT */}
      <div className="space-y-6 mt-6">
        {/* KATEGORI */}
        <FilterSection title="Kategori">
          <Checkbox label="Semua" count={1203} defaultChecked />
          <Checkbox label="Berita Terhangat" count={123} />
          <Checkbox label="Tentang Teknologi" count={24} />
          <Checkbox label="Bersama Pelanggan" count={42} />
          <Checkbox label="Pembicara Ahli" count={224} />
        </FilterSection>

        <Divider />

        {/* JENIS FILE */}
        <FilterSection title="Jenis File">
          <Checkbox label="Semua" count={78} />
          <Checkbox label="Audio Visual" count={120} />
          <Checkbox label="Audio" count={34} defaultChecked />
          <Checkbox label="Foto" count={234} />
          <Checkbox label="Teks" count={9} />
        </FilterSection>

        <Divider />

        {/* FORMAT */}
        <FilterSection title="Format Audio ">
          <Checkbox label="Semua" count={2} defaultChecked />
        </FilterSection>

        {/* RESET */}
        <div className="text-center pt-4">
          <button className="text-sm text-[#966314] font-medium hover:underline">
            Reset Filter
          </button>
        </div>
      </div>
    </div>
  );
}

/* ===== COMPONENTS ===== */

function FilterSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <p className="text-sm font-medium mb-3">{title}</p>
      <div className="space-y-2">{children}</div>
    </div>
  );
}

function Checkbox({
  label,
  count,
  defaultChecked,
}: {
  label: string;
  count: number;
  defaultChecked?: boolean;
}) {
  return (
    <label className="flex items-center justify-between text-sm cursor-pointer">
      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          defaultChecked={defaultChecked}
          className="h-4 w-4 accent-[#966314]"
        />
        <span>{label}</span>
      </div>
      <span className="text-gray-400">({count})</span>
    </label>
  );
}

function Divider() {
  return <div className="border-t border-gray-200"></div>;
}