import { type InputHTMLAttributes, forwardRef } from 'react'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
}

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { label, error, id, className = '', ...props },
  ref
) {
  return (
    <div className="field">
      {label && <label htmlFor={id}>{label}</label>}
      <input
        ref={ref}
        id={id}
        className={className}
        {...props}
      />
      {error && <span className="help-text" style={{ color: 'var(--red)' }}>{error}</span>}
    </div>
  )
})