import { forwardRef, type InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className = '', label, error, ...props }, ref) => {
    return (
      <div className="w-full">
        {label && (
          <label className="block text-xs font-bold tracking-widest text-zinc-500 uppercase mb-2">
            {label}
          </label>
        )}
        <input
          ref={ref}
          className={`block w-full px-5 py-4 bg-zinc-100 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-zinc-300 focus:ring-4 focus:ring-zinc-100 sm:text-base font-medium transition-all duration-200 text-zinc-900 placeholder-zinc-400
            ${error ? 'border-red-300 bg-red-50 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-100' : ''}
            ${className}`}
          {...props}
        />
        {error && <p className="mt-2 text-sm text-red-600 font-medium">{error}</p>}
      </div>
    );
  }
);
Input.displayName = 'Input';
