'use client';

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

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

export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
  return (
    <Input
      type="text"
      placeholder="Search teams by name, description, region, or language..."
      value={searchQuery}
      onChange={(e) => onSearchChange(e.target.value)}
      icon={<Icon icon={Search} size={5} intent="low" />}
      fullWidth
    />
  );
}