import React, { useState } from 'react';
import { SlidersHorizontal, X } from 'lucide-react';
import { LeftSidebar } from './LeftSidebar';

/**
 * Mobil filtre çekmecesi: küçük ekranda sol menü listeyi aşağı itiyordu
 * (72 satırlık panel). Artık lg altında gizli; "Filtreler" düğmesiyle
 * soldan açılan çekmecede aynı bileşen çalışır.
 */
export const MobilFiltreCekmecesi = () => {
  const [acik, setAcik] = useState(false);
  return (
    <div className="lg:hidden">
      <button
        type="button"
        onClick={() => setAcik(true)}
        className="w-full mb-3 bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-xs font-bold text-slate-800 flex items-center justify-center gap-2 shadow-xs"
      >
        <SlidersHorizontal className="w-4 h-4 text-blue-600" /> Filtreler & Hızlı Erişim
      </button>
      {acik && (
        <div className="fixed inset-0 z-50 flex" onClick={() => setAcik(false)}>
          <div className="absolute inset-0 bg-slate-900/50" />
          <div onClick={(e) => e.stopPropagation()} className="relative h-full w-[88%] max-w-sm bg-slate-100 shadow-2xl overflow-y-auto p-3 animate-fade-in">
            <div className="flex items-center justify-between mb-3">
              <span className="text-xs font-black text-slate-800 uppercase tracking-wider">Filtreler</span>
              <button onClick={() => setAcik(false)} className="p-1.5 rounded-lg bg-white border border-slate-200" aria-label="Kapat"><X className="w-4 h-4" /></button>
            </div>
            <LeftSidebar />
          </div>
        </div>
      )}
    </div>
  );
};