import { ChevronDown } from 'lucide-react';

const CustomInput = ({ 
  name, 
  value, 
  onChange, 
  placeholder, 
  type = 'text',
  Icon,
  error = '',
  className = '',
  ...props
}) => {
  return (
    <div className={`relative ${className}`}>
      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
        <Icon className="w-5 h-5" />
      </div>
      <input
        type={type}
        name={name}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className={`w-full pl-12 pr-4 py-4 bg-white border-2 ${error ? 'border-red-300' : 'border-gray-200'} rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent text-gray-700`}
      />
      {error && (
        <p className="text-red-500 text-sm mt-2 pl-4">{error}</p>
      )}
    </div>
  );
};

export default CustomInput;