'use client';

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

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

export function DriverSearchBar({ query, onChange }: DriverSearchBarProps) {
  return (
    <Box position="relative" group>
      <Input
        value={query}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Search drivers by name or nationality..."
        icon={<Search size={20} />}
      />
    </Box>
  );
}
