'use client'

import { ForwardedRef, forwardRef, type InputHTMLAttributes, type ReactElement } from 'react'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  /** The input's label */
  label?: string
  /** The input's id */
  id: string
}

/**
 * Input component
 * @param {string} label - Label for the input
 * @param {string} id - Id for the input
 * @param {string} validationMessage - Validation message for the input
 * @param {InputHTMLAttributes<HTMLInputElement>} props - Other props to pass to the input
 * @returns {ReactElement} - React element
 *
 * @example
 * <Input label="First name" id="firstName" validationMessage="First name is required" />
 *
 */
export const PktInput = forwardRef(
  ({ label, id, children, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): ReactElement => {
    return (
      <div className="pkt-form-group">
        <label htmlFor={id} className="pkt-form-label">
          {label}
        </label>
        <input className="pkt-form-input" id={id} {...props} ref={ref} />
        {children}
      </div>
    )
  },
)

PktInput.displayName = 'PktInput'