import React from 'react';

interface SearchBarProps {
    searchTerm: string;
    onSearchChange: (term: string) => void;
    categoryFilter: string;
    onCategoryChange: (category: string) => void;
    categories: string[];
}

export const SearchBar: React.FC<SearchBarProps> = ({
    searchTerm,
    onSearchChange,
    categoryFilter,
    onCategoryChange,
    categories
}) => {
    return (
        <div className="search-bar-container">
            <input
                type="text"
                className="search-input"
                placeholder="Search codes..."
                value={searchTerm}
                onChange={(e) => onSearchChange(e.target.value)}
            />
            <select
                className="category-select"
                value={categoryFilter}
                onChange={(e) => onCategoryChange(e.target.value)}
            >
                <option value="">All Categories</option>
                {categories.map(cat => (
                    <option key={cat} value={cat}>{cat}</option>
                ))}
            </select>
        </div>
    );
};