src/components/common/Input.tsx

import React, { forwardRef } from 'react';

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

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, className = '', fullWidth = true, icon, ...props }, ref) => {
    return (
      <div className={`mb-4 ${fullWidth ? 'w-full' : ''} ${className}`}>

        {label && (

          <label className="block text-sm font-medium mb-1 text-gray-700">

            {label}

          </label>

        )}

        <div className="relative">

          {icon && (

            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">

              {icon}

            </div>

          )}

          <input

            ref={ref}

            className={`

              ios-input

              ${icon ? 'pl-10' : ''}

              ${error ? 'border-red-500' : ''}

            `}

            {...props}

          />

        </div>

        {error && <p className="mt-1 text-sm text-red-600">{error}</p>}

      </div>
    );
  }
);

Input.displayName = 'Input';

export default Input;