import { forwardRef } from "react";
import styles from "./Input.module.css";

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  hint?: string;
}

const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { label, error, hint, required, className = "", ...props },
  ref,
) {
  return (
    <label className={styles.champ}>
      {label && (
        <span className={styles.label}>
          {label}
          {required && <span className={styles.requis}>*</span>}
        </span>
      )}
      <input
        ref={ref}
        className={[styles.input, error ? styles.erreurChamp : "", className].filter(Boolean).join(" ")}
        required={required}
        {...props}
      />
      {error && <span className={styles.messageErreur}>{error}</span>}
      {hint && !error && <span className={styles.indication}>{hint}</span>}
    </label>
  );
});

export default Input;