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

interface DriversSearchProps {
  query: string;
  onChange: (query: string) => void;
}

export function DriversSearch({ query, onChange }: DriversSearchProps) {
  return (
    <Box mb={8}>
      <Box maxWidth="28rem">
        <Input
          type="text"
          placeholder="Search drivers by name or nationality..."
          value={query}
          onChange={(e) => onChange(e.target.value)}
          icon={<Icon icon={Search} size={5} color="#6b7280" />}
        />
      </Box>
    </Box>
  );
}