export function getFilterHTML() {
    return `
    <div id="filter-view" class="absolute inset-0 bg-white z-50 hidden flex-col">
        <div class="p-4 border-b border-gray-200 flex items-center justify-between mt-4">
            <button onclick="closeFilters()" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:bg-gray-100 rounded-full transition-colors"><i class="fas fa-arrow-left text-lg"></i></button>
            <h2 class="text-lg font-semibold text-black">Filters</h2>
            <button class="px-2 text-sm font-medium text-gray-500 hover:text-black transition-colors">Reset</button>
        </div>

        <div class="flex-1 overflow-y-auto p-6 space-y-8">
            <div>
                <h3 class="text-base font-semibold text-black mb-4">Meal Time</h3>
                <div class="flex flex-wrap gap-2.5">
                    <button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">Breakfast</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Lunch</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Dinner</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Supper</button>
                </div>
            </div>

            <div>
                <h3 class="text-base font-semibold text-black mb-4">Dietary & Tags</h3>
                <div class="flex flex-wrap gap-2.5">
                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Vegetarian</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">Vegan</button>
                    <button class="px-4 py-2 bg-gray-900 text-white rounded-full text-sm font-medium transition-colors">High Protein</button>
                </div>
            </div>

            <div>
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-base font-semibold text-black">Max Prep Time</h3>
                    <span id="time-display" class="text-sm font-medium text-gray-600">30 min</span>
                </div>
                <div class="px-1">
                    <input type="range" id="prep-time-slider" min="5" max="120" step="5" value="30" class="w-full appearance-none bg-transparent">
                    <div class="flex justify-between text-xs text-gray-400 mt-3 font-medium">
                        <span>5m</span><span>30m</span><span>1h</span><span>2h+</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-4 border-t border-gray-200 bg-white mt-auto">
            <button onclick="closeFilters()" class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm">Show 12 Results</button>
        </div>
    </div>
    `;
}

export function setupFilter() {
    const timeSlider = document.getElementById('prep-time-slider');
    const timeDisplay = document.getElementById('time-display');

    if(timeSlider) {
        timeSlider.addEventListener('input', (e) => {
            const val = e.target.value;
            timeDisplay.textContent = val >= 120 ? '120+ min' : `${val} min`;
        });
    }
}