'use client';

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

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

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