import { cn } from "../../lib/utils"
interface FormTextInputProps {
    value: string,
    name: string,
    onChangeHandler: React.ChangeEventHandler<HTMLInputElement>,
    type: "text" | "password" | "email",
    children?: React.ReactNode,
    className?: string,
    placeholder?: string
}

interface FormSubmitInputProps {
    name: string,
    value: string | undefined,
    onSubmitHandler: React.FormEventHandler<HTMLInputElement> | undefined,
    children?: React.ReactNode,
    className?: string
}

interface FormLabelProps {
    name: string,
    className?: string,
    title?: string
}

const FormLabel = (props: FormLabelProps) => {
    let label = (props.title == null) ? props.name.charAt(0).toUpperCase() + props.name.slice(1) : props.title;
    return(<label className={cn(props.className)} htmlFor={props.name}>{label}</label>);
}

const FormTextInput = (props: FormTextInputProps) => {
    return(      
            <input className={cn(props.className)} type={props.type} name={props.name} value={props.value} placeholder={props.placeholder} onChange={props.onChangeHandler}></input>
    );
}

const FormSubmitInput = (props: FormSubmitInputProps) => {
    return(
            <input className={cn(props.className)} type="submit" name={props.name} value={props.value} onSubmit={props.onSubmitHandler}>{props.children}</input>
    );
}

export {
    FormTextInput,
    FormSubmitInput,
    FormLabel
};