import React from "react"

import tw, { styled } from "twin.macro"
import "styled-components/macro"

export default function Input({ label, title, className, name, id, children, ...props }) {
  return (
    <div css={[title && tw`my-1`]} className={className}>
      {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, className, name, id, children, ...props }) {
  return (
    <div css={[title && tw`my-1`]} className={className}>
      {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, className, name, id, children, ...props }) {
  return (
    <div tw="my-1 flex text-secondary" className={className}>
      <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 >
  )
}