import React from 'react'
import tw from 'twin.macro'
import 'styled-components/macro'

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

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