import React, { InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  icon?: React.ReactNode;
  error?: string;
}

export default function Input({ label, icon, error, className = '', ...props }: InputProps) {
  return (
    <div className={`flex flex-col gap-1.5 ${className}`}>
      {label && <label className="text-sm font-semibold text-gray-700 select-none">{label}</label>}
      <div className="relative">
        {icon && (
          <div className="absolute left-3 top-0 bottom-0 flex items-center justify-center text-gray-500 pointer-events-none">
            {icon}
          </div>
        )}
        <input
          className={`w-full h-[48px] rounded-lg border ${error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary'} bg-white text-base text-gray-900 outline-none transition-shadow placeholder-gray-400 ${icon ? 'pl-10' : 'pl-4'} pr-4 touch-manipulation`}
          {...props}
        />
      </div>
      {error && <span className="text-xs text-red-500 font-medium select-none">{error}</span>}
    </div>
  );
}