// src/components/FilterMenu.tsx
import React, { useState } from "react";

type FilterMenuProps = {
  onFilterChange: (filters: { [key: string]: boolean }) => void;
};

const FilterMenu: React.FC<FilterMenuProps> = ({ onFilterChange }) => {
  const [filtersVisible, setFiltersVisible] = useState(false);
  const [selectedFilters, setSelectedFilters] = useState<{ [key: string]: boolean }>({
    filter1: false,
    filter2: false,
    filter3: false,
  });

  const toggleFilterMenu = () => {
    setFiltersVisible(!filtersVisible);
  };

  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, checked } = e.target;
    const updatedFilters = { ...selectedFilters, [name]: checked };
    setSelectedFilters(updatedFilters);
    onFilterChange(updatedFilters); // Pass the updated filters to parent
  };

  return (
    <div className="relative inline-block text-left">
      {/* Filtreler Butonu */}
      <button
        onClick={toggleFilterMenu}
        className="px-6 py-2 text-m font-bold text-text-muted bg-surface-2 rounded-full transition-colors hover:bg-background/60 focus:outline-none focus:ring-2 focus:ring-primary"
      >
        Filtreler
      </button>

      {/* Filtre Menüsü */}
      {filtersVisible && (
        <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-10">
          <div className="p-4">
            <label className="block text-sm text-text-muted mb-2">
              <input
                type="checkbox"
                name="filter1"
                checked={selectedFilters.filter1}
                onChange={handleCheckboxChange}
                className="mr-2"
              />
              Fiyat Aralığı
            </label>
            <label className="block text-sm text-text-muted mb-2">
              <input
                type="checkbox"
                name="filter2"
                checked={selectedFilters.filter2}
                onChange={handleCheckboxChange}
                className="mr-2"
              />
              Yüksek Puan
            </label>
            <label className="block text-sm text-text-muted mb-2">
              <input
                type="checkbox"
                name="filter3"
                checked={selectedFilters.filter3}
                onChange={handleCheckboxChange}
                className="mr-2"
              />
              Yeni Eklenenler
            </label>
          </div>
        </div>
      )}
    </div>
  );
};

export default FilterMenu;
