import { X } from 'lucide-react';

interface FilterOption {
  value: string;
  label: string;
}

interface FilterGroup {
  label: string;
  options: FilterOption[];
  selectedValues: string[];
  onToggle: (value: string) => void;
}

interface FilterModalProps {
  isOpen: boolean;
  onClose: () => void;
  filterGroups: FilterGroup[];
  onClear: () => void;
  onApply: () => void;
}

export function FilterModal({ isOpen, onClose, filterGroups, onClear, onApply }: FilterModalProps) {
  if (!isOpen) return null;

  const handleApply = () => {
    onApply();
    onClose();
  };

  const handleClear = () => {
    onClear();
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-card rounded-lg shadow-xl w-full max-w-md max-h-[80vh] overflow-y-auto">
        <div className="flex items-center justify-between p-4 border-b border-border sticky top-0 bg-card">
          <h2 className="text-lg font-semibold text-foreground">Filters</h2>
          <button
            onClick={onClose}
            className="text-muted-foreground hover:text-foreground p-2 rounded-md hover:bg-accent"
            style={{ minWidth: '44px', minHeight: '44px' }}
            aria-label="Close"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="p-4 space-y-6">
          {filterGroups.map((group, index) => (
            <div key={index}>
              <h3 className="text-sm font-medium text-foreground mb-3">{group.label}</h3>
              <div className="space-y-2">
                {group.options.map((option) => (
                  <label
                    key={option.value}
                    className="flex items-center cursor-pointer py-2 px-3 rounded-md hover:bg-muted"
                    style={{ minHeight: '44px' }}
                  >
                    <input
                      type="checkbox"
                      checked={group.selectedValues.includes(option.value)}
                      onChange={() => group.onToggle(option.value)}
                      className="rounded border-input text-primary focus:ring-primary h-5 w-5"
                    />
                    <span className="ml-3 text-base text-foreground">{option.label}</span>
                  </label>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="flex gap-3 p-4 border-t border-border bg-muted sticky bottom-0">
          <button
            onClick={handleClear}
            className="flex-1 bg-card text-foreground py-3 px-4 rounded-md hover:bg-accent font-medium border border-input"
            style={{ minHeight: '44px' }}
          >
            Clear All
          </button>
          <button
            onClick={handleApply}
            className="flex-1 bg-primary text-white py-3 px-4 rounded-md hover:bg-primary/90 font-medium"
            style={{ minHeight: '44px' }}
          >
            Apply Filters
          </button>
        </div>
      </div>
    </div>
  );
}
