import React from 'react';
/**
 * Props interface for the Input component
 *
 * Input is a versatile text input component that supports various input types,
 * icons, buttons, tooltips, and validation states. It provides a consistent
 * user experience for text-based data entry with enhanced accessibility features.
 */
export interface InputProps {
    /**
     * Unique identifier for the input element
     * Used for accessibility, form handling, and testing
     *
     * @example "username-input"
     */
    id?: string;
    /**
     * Text label displayed above the input field
     * Provides context about what the input represents
     *
     * @example "Email Address"
     */
    label?: string;
    /**
     * The type of input field to render
     * Determines the input behavior, validation, and keyboard type
     *
     * @example "text" - For general text input
     * @example "password" - For password fields (masks input with dots)
     * @example "email" - For email addresses (provides email validation and keyboard)
     */
    type: "text" | "password" | "email";
    /**
     * Helper text displayed below the input
     * Provides additional context, instructions, or validation messages
     *
     * @example "Enter your email address to receive updates"
     */
    assistiveText?: string;
    /**
     * Placeholder text shown when the input is empty
     * Provides a hint about what should be entered
     *
     * @example "Enter your username"
     */
    placeholder?: string;
    /**
     * Text for an optional button inside the input
     * When provided, renders a clickable button within the input field
     *
     * @example "Send"
     */
    buttonText?: string;
    /**
     * Whether the input is disabled and non-interactive
     * When true, the input cannot be focused or modified
     *
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Icon name to display within the input field
     * Uses the Icons component to render the specified icon
     *
     * @example "search"
     */
    icon?: string;
    /**
     * The current value of the input field
     * This makes the component controlled
     *
     * @example "john.doe@example.com"
     */
    value?: string;
    /**
     * Maximum number of characters allowed in the input
     * Prevents users from entering more characters than specified
     *
     * @example 50 - Limits input to 50 characters
     */
    maxLength?: number;
    /**
     * Tooltip text displayed on hover over the info icon
     * Provides additional help or context for the input
     *
     * @example "Your email will be used for account recovery"
     */
    tooltip?: string;
    /**
     * Custom CSS styles to apply to the input container
     * Overrides default styling for layout and appearance
     *
     * @example { width: '300px', backgroundColor: '#f9f9f9' }
     */
    style?: React.CSSProperties;
    /**
     * Additional CSS class names to apply to the component
     * Allows for custom styling through CSS classes
     *
     * @example "custom-input search-field"
     */
    className?: string;
    /**
     * Callback function triggered when the input value changes
     * Receives the new string value as parameter
     *
     * @param value - The new value entered by the user
     * @example (value) => setEmail(value)
     */
    onChange?: (value: string) => void;
    /**
     * Callback function triggered when the button inside input is clicked
     * Only active when buttonText is provided
     *
     * @example () => handleSubmit()
     */
    onClick?: () => void;
    /**
     * Whether the component is in a loading state
     * When true, the input may show loading indicators or be disabled
     *
     * @default false
     */
    loading?: boolean;
    /**
     * Position of the icon relative to the input text
     * Determines whether icon appears before or after the input value
     *
     * @default "right"
     */
    iconPosition?: "left" | "right";
    /**
     * Whether the input should automatically receive focus when mounted
     * Useful for improving user experience in forms
     *
     * @default false
     */
    autoFocus?: boolean;
    /**
     * Marks the input as required. When true, and on form submit attempt, if empty it will show invalid state.
     */
    isRequiere?: boolean;
}
