import * as React from 'react'
import tw from 'twin.macro'

type InputProps = React.InputHTMLAttributes<HTMLInputElement>

const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => (
  <input
    css={tw`
        flex
        h-10
        w-full
        rounded-md
        border
        border-slate-300
        bg-transparent
        py-2
        px-3
        text-sm
        placeholder:text-slate-400
        focus:outline-none
        focus:ring-2
        focus:ring-slate-400
        focus:ring-offset-2
        disabled:cursor-not-allowed
        disabled:opacity-50
        dark:border-slate-700
        dark:text-slate-50
        dark:focus:ring-slate-400
        dark:focus:ring-offset-slate-900
      `}
    ref={ref}
    {...props}
  />
))
Input.displayName = 'Input'

const _Input = Input
export { _Input as Input, type InputProps }
