import React, {ChangeEvent} from "react";

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

export default function TextInput(
    {
        value,
        setValue,
        placeholder,
        readOnly = false,
        disabled = false,
        onFocus
    }: TextInputProps) {
    return (
        <input
            type="text"
            value={value}
            onChange={setValue}
            readOnly={readOnly}
            disabled={disabled}
            placeholder={placeholder}
            onFocus={onFocus}
            className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
                hover:bg-secondary hover:border-secondary
                placeholder:text-muted/60
                outline-none transition-all duration-200
                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                ${readOnly ? 'cursor-default' : ''}`}
        />
    )
}