import React, { forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface AuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
  icon: React.ReactNode;
  optional?: boolean;
  rightElement?: React.ReactNode;
}

export const AuthInput = forwardRef<HTMLInputElement, AuthInputProps>(
  (
    { label, error, icon, optional, rightElement, className, ...props },
    ref
  ) => {
    return (
      <div>
        <div className="flex items-center justify-between mb-2">
          <label className="block text-sm uppercase tracking-wider text-gray-400 font-bold">
            {label}
          </label>
          {optional && (
            <span className="ml-2 text-[10px] font-bold tracking-widest text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full uppercase">
              Opsional
            </span>
          )}
        </div>

        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            {icon}
          </div>

          <input
            ref={ref}
            className={cn(
              'w-full bg-white border rounded-lg pl-12 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:border-yellow-400 focus:ring-1 focus:ring-yellow-400 transition-all shadow-sm',
              rightElement ? 'pr-12' : 'pr-4', // Padding dinamis jika ada icon kanan
              error
                ? 'border-rose-300 ring-1 ring-rose-300'
                : 'border-gray-200',
              className
            )}
            {...props}
          />

          {rightElement && (
            <div className="absolute inset-y-0 right-0 pr-4 flex items-center">
              {rightElement}
            </div>
          )}
        </div>

        {error && (
          <p className="mt-2 text-[10px] text-rose-400 font-black uppercase tracking-widest flex items-center gap-1.5">
            <span className="w-1 h-1 bg-rose-400 inline-block shrink-0" />
            {error}
          </p>
        )}
      </div>
    );
  }
);
AuthInput.displayName = 'AuthInput';