import React from 'react'

function Input(props) {
    return (
        <div className={props.title != null ? "mb-3": ""}>
            {props.title != null ? (
            <label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
                {props.title}
            </label>
            ) : null}
            <input {...props} name={props.name || props.title} id={props.id || props.name || props.title} className={"bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "+props.className}/>
            {props.children}
        </div>
    )
}
function TextArea(props) {
    return (
        <div className="mb-3">
            <label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
                {props.title}
            </label>
            <textarea {...props} name={props.name || props.title} id={props.id || props.name || props.title} className={"bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "+props.className}/>
            {props.children}
        </div>
    )
}

export default Input
export {
    TextArea
}