import React from 'react';
import { Search, SlidersHorizontal } from 'lucide-react';
import { __ } from '@/lib/i18n';

interface SearchBarProps {
  value: string;
  onChange: (value: string) => void;
  onFilterClick: () => void;
  filterCount?: number;
}

export function SearchBar({ value, onChange, onFilterClick, filterCount = 0 }: SearchBarProps) {
  return (
    <div className="flex gap-2 items-center">
      {/* Search Input */}
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
        <input
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={__('Search products...')}
          className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
        />
      </div>

      {/* Filter Button */}
      <button
        onClick={onFilterClick}
        className="relative flex-shrink-0 p-2.5 rounded-lg border border-border bg-background hover:bg-accent transition-colors"
      >
        <SlidersHorizontal className="w-5 h-5" />
        {filterCount > 0 && (
          <span className="absolute -top-1 -right-1 w-5 h-5 bg-primary text-primary-foreground text-xs font-medium rounded-full flex items-center justify-center">
            {filterCount}
          </span>
        )}
      </button>
    </div>
  );
}
