import React from 'react'

export default function Input(props) {
    return (
        <div className={props.title != null ? "my-1": ""}>
            {props.title != null ? (
            <label {...props.label} className={"block text-secondary text-sm font-bold mb-1 "+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>
    )
}
export function TextArea({label, title, name, id, children, ...props}) {
    return (
        <div className="my-1">
            <label {...label} className={"block text-secondary text-sm font-bold mb-2 "+ label?.className} htmlFor={id ?? name ?? title}>
                {title}
            </label>
            <textarea {...props} name={name ?? title} id={id ?? 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}/>
            {children}
        </div>
    )
}

export function CheckBox({label, title, name, id, children, ...props}){
    return(
    <div class="my-1 flex text-secondary">
        <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} className={"checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "+props.className}/>
        {title != null ? (
        <label {...props.label} htmlFor={id ?? name ?? title} class="block font-bold px-2">
            {title}
        </label>
        ) : null}
        {children}
    </div>
    )
}