import { forwardRef, useId, useImperativeHandle, useRef } from 'react'
import InputLabel from './Label'
import './styles/Label.css'
import './styles/Text.css'

export interface HandleForInputText {
    getValue(): string
}

interface PropsForInputTags {
    label: string
    placeholder: string
}

const InputText = forwardRef<HandleForInputText, PropsForInputTags>(({ label, placeholder }, ref) => {
    const componentID = useId()
    const inputRef = useRef<HTMLInputElement>(null)

    useImperativeHandle(ref, () => ({
        getValue: () => inputRef.current?.value ?? '',
    }))

    return (
        <>
            {label && <InputLabel for={componentID} label={label} />}
            <input id={componentID} ref={inputRef} type="text" className="input-text" placeholder={placeholder} />
        </>
    )
})

export default InputText