import React, { useState, useEffect } from 'react';
import { SourceBadge, ContentSource } from './SourceBadge';

interface ContentFilterProps {
  onFilterChange: (filters: FilterState) => void;
  className?: string;
}

export interface FilterState {
  source: ContentSource | 'all';
  search: string;
}

export const ContentFilter: React.FC<ContentFilterProps> = ({ onFilterChange, className = '' }) => {
  const [filters, setFilters] = useState<FilterState>({
    source: 'all',
    search: '',
  });

  const handleSourceChange = (source: ContentSource | 'all') => {
    const newFilters = { ...filters, source };
    setFilters(newFilters);
    onFilterChange(newFilters);
  };

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const search = e.target.value;
    const newFilters = { ...filters, search };
    setFilters(newFilters);
    onFilterChange(newFilters);
  };

  return (
    <div className={`space-y-4 ${className}`}>
      {/* Search */}
      <div>
        <input
          type="text"
          placeholder="Search content..."
          value={filters.search}
          onChange={handleSearchChange}
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-600 dark:text-white"
        />
      </div>

      {/* Source Filter */}
      <div>
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Source</label>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => handleSourceChange('all')}
            className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
              filters.source === 'all'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
            }`}
          >
            All
          </button>
          {(['igny8', 'wordpress', 'shopify', 'custom'] as ContentSource[]).map((source) => (
            <button
              key={source}
              onClick={() => handleSourceChange(source)}
              className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
                filters.source === source
                  ? 'bg-blue-500 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
              }`}
            >
              <SourceBadge source={source} />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};
