import React, {ChangeEvent} from "react";

type InputSize = 'sm' | 'md' | 'lg';

const sizeClasses: Record<InputSize, string> = {
    sm: 'px-3 py-1.5 text-xs rounded-lg',
    md: 'px-4 py-2.5 text-sm rounded-xl',
    lg: 'px-5 py-3 text-base rounded-xl',
};

interface TextInputProps {
    value: string;
    setValue?: (e: ChangeEvent<HTMLInputElement>) => void;
    placeholder?: string;
    readOnly?: boolean;
    disabled?: boolean;
    onFocus?: () => void;
    size?: InputSize;
}

export default function TextInput(
    {
        value,
        setValue,
        placeholder,
        readOnly = false,
        disabled = false,
        onFocus,
        size = 'md'
    }: TextInputProps) {
    return (
        <input
            type="text"
            value={value}
            onChange={setValue}
            readOnly={readOnly}
            disabled={disabled}
            placeholder={placeholder}
            onFocus={onFocus}
            className={`input-base ${sizeClasses[size]}`}
        />
    )
}