'use client';

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

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

export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
  return (
    <Box marginBottom={8}>
      <Input
        type="text"
        placeholder="FILTER BY TEAM NAME, REGION OR TAGS..."
        value={searchQuery}
        onChange={(e) => onSearchChange(e.target.value)}
        icon={<Icon icon={Search} size={4} intent="low" />}
        variant="search"
        fullWidth
      />
    </Box>
  );
}