

'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 (
    <div style={{ marginBottom: '1.5rem' }}>
      <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
      />
    </div>
  );
}
