// src/components/FilterBar.tsx
import { Search, ArrowUpDown } from 'lucide-react';
import { useTranslation } from '../hooks/useTranslation';

interface FilterBarProps {
  searchQuery: string;
  setSearchQuery: (val: string) => void;
  ordering: string;
  setOrdering: (val: string) => void;
  orderingOptions: { value: string; label: string }[];
}

export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions }: FilterBarProps) {
  const { t } = useTranslation();
  
  return (
    <div className="flex flex-col sm:flex-row gap-4 mb-6">
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder={t.workspace?.searchPlaceholder || 'Search...'}
          className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
        />
      </div>
      <div className="flex items-center gap-2">
        <ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />
        <select
          value={ordering}
          onChange={(e) => setOrdering(e.target.value)}
          className="w-full sm:w-auto py-2.5 pl-3 pr-8 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow appearance-none"
        >
          {orderingOptions.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}