'use client';

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

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

export function DriversSearch({ query, onChange }: DriversSearchProps) {
  return (
    <Box mb={8}>
      <Box style={{ position: 'relative', maxWidth: '28rem' }}>
        <Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10 }}>
          <Search style={{ width: '1.25rem', height: '1.25rem', color: '#6b7280' }} />
        </Box>
        <Input
          type="text"
          placeholder="Search drivers by name or nationality..."
          value={query}
          onChange={(e) => onChange(e.target.value)}
          style={{ paddingLeft: '2.75rem' }}
        />
      </Box>
    </Box>
  );
}