'use client';

import { Search } from 'lucide-react';
import Input from '@/components/ui/Input';

interface TeamSearchBarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
}

export default function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
  return (
    <div id="teams-list" className="mb-6 scroll-mt-8">
      <div className="flex flex-col lg:flex-row gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
          <Input
            type="text"
            placeholder="Search teams by name, description, region, or language..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-11"
          />
        </div>
      </div>
    </div>
  );
}