import * as React from 'react';

import { cn } from '../../shared/utils';

/**
 * Props para o componente Input.
 *
 * @interface InputProps
 */
export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'> {
  /** Define o tamanho vertical e padding do input. */
  size?: 'sm' | 'md' | 'lg';
}

/**
 * Single-line text input field.
 *
 * @description
 * Used to capture short text, passwords, emails, and numbers. Should be
 * used inside a `<FormField>` in applications that manage form state.
 * Supports 3 sizes: `sm`, `md` (default), `lg`.
 *
 * @ai-rules
 * 1. NEVER use a native `<input>` element.
 * 2. For large multi-line text (description, biography), use `<Textarea>` — never `<Input>`.
 * 3. Inside React Hook Form, connect via `<FormControl>` wrapping `<Input {...field} />`.
 */
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, size = 'md', ...props }, ref) => {
    const sizeClasses = {
      sm: 'h-8 px-2 py-1 text-sm',
      md: 'h-10 px-3 py-2 text-base',
      lg: 'h-12 px-4 py-3 text-base',
    };

    return (
      <input
        type={type}
        data-slot="input"
        className={cn(
          'flex w-full min-w-0 bg-background rounded-[var(--radius)] border border-border transition-colors outline-none text-foreground',
          'placeholder:text-muted-foreground',
          'focus:ring-2 focus:ring-primary focus:border-transparent',
          'disabled:cursor-not-allowed disabled:opacity-50',
          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
          sizeClasses[size],
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Input.displayName = 'Input';

export { Input };