'use client';

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

export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  error?: string | boolean;
  icon?: React.ReactNode;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, error, icon, ...props }, ref) => (
    <div className="relative">
      {icon && (
        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-faint">
          {icon}
        </span>
      )}
<input
        ref={ref}
        aria-invalid={error ? true : undefined}
        className={cn(
          'input',
          icon ? 'pl-10' : null,
          error ? 'input-error' : null,
          className,
        )}
        {...props}
      />
    </div>
  ),
);
Input.displayName = 'Input';