import React from 'react';

interface FilledInputProps {
    label: string;
    value: string | number;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    type?: string;
    icon?: React.ReactNode;
    autoFocus?: boolean;
    step?: string;
    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
    autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
    autoComplete?: string;
}

const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete }) => (
    <div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
        <label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
            {icon} {label}
        </label>
        <input
            type={type}
            step={step}
            inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
            autoFocus={autoFocus}
            className="w-full pt-6 pb-2 px-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent"
            placeholder="0"
            value={value}
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            autoCapitalize={autocapitalize}
            autoComplete={autoComplete}
        />
    </div>
);

export default FilledInput;