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

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

export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
  return (
    <Box id="teams-list" mb={6}>
      <Stack direction="row" gap={4} wrap>
        <Box flexGrow={1}>
          <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} color="var(--text-gray-500)" />}
          />
        </Box>
      </Stack>
    </Box>
  );
}