/**
* AuthInput Component
*
* Reusable input component for authentication forms
* Includes label, error message, and proper styling
* Uses design system colors for dark theme consistency
*/
import React from 'react';
export interface AuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label: string;
error?: string;
helperText?: string;
}
export function AuthInput({
label,
error,
helperText,
id,
className = '',
...props
}: AuthInputProps) {
const inputId = id || label.toLowerCase().replace(/\s+/g, '-');
return (
<div className="w-full" suppressHydrationWarning>
<label
htmlFor={inputId}
className="block text-sm font-medium text-text-primary mb-1"
>
{label}
</label>
<input
id={inputId}
className={`
w-full px-3 py-2 border rounded-md shadow-sm
text-text-primary placeholder:text-text-tertiary bg-bg-secondary
focus:outline-none focus:ring-2 focus:ring-accent-red focus:border-accent-red
disabled:bg-bg-elevated disabled:cursor-not-allowed disabled:text-text-tertiary
${error ? 'border-red-500' : 'border-border-emphasis'}
${className}
`}
{...props}
/>
{error && (
<p className="mt-1 text-sm text-red-400">{error}</p>
)}
{helperText && !error && (
<p className="mt-1 text-sm text-text-tertiary">{helperText}</p>
)}
</div>
);
}
