veza/apps/web/src/features/auth/components/AuthInput.tsx

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

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

export function AuthInput({
  error,
  label,
  className,
  id,
  ...props
}: AuthInputProps) {
  const inputId = id || `auth-input-${Math.random().toString(36).substr(2, 9)}`;

  return (
    <div className="w-full">
      {label && (
        <label
          htmlFor={inputId}
          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
        >
          {label}
        </label>
      )}
      <input
        id={inputId}
        className={cn(
          'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 transition-colors',
          'dark:bg-gray-800 dark:text-white dark:border-gray-600',
          error
            ? 'border-red-500 focus:ring-red-500 dark:border-red-500'
            : 'border-gray-300 focus:ring-blue-500 dark:border-gray-600',
          className,
        )}
        aria-invalid={error ? 'true' : 'false'}
        aria-describedby={error ? `${inputId}-error` : undefined}
        aria-required={props.required ? 'true' : undefined}
        {...props}
      />
      {error && (
        <p
          id={`${inputId}-error`}
          className="mt-1 text-sm text-red-600 dark:text-red-400"
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  );
}