import { forwardRef } from 'react'

interface TextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
  label: string
}

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  (props, ref) => {
    const { label, name, ...rest } = props

    return (
      <>
        <div className='form-group'>
          <label htmlFor={name}>{label}</label>
          <br />
          <textarea id={name} name={name} ref={ref} {...rest} />
        </div>

        <style jsx>
          {`
            .form-group {
              padding-top: 15px;
              margin-bottom: 30px;
            }
            .form-group textarea {
              background: transparent;
              color: var(--color-text);
              outline: none;
              width: 100%;
              height: auto;
              padding: 10px;
              resize: vertical;
              margin-top: 8px;
            }
          `}
        </style>
      </>
    )
  }
)
