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

type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ ...props }, ref) => (
    <textarea
      css={tw`
          flex
          h-20
          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}
    />
  )
)
Textarea.displayName = 'Textarea'

const _Textarea = Textarea
export { _Textarea as Textarea, type TextareaProps }
