import { forwardRef } from "react";

/**
 * Input
 *
 * ghost:   boolean - removes border/background
 * invalid: boolean - applies invalid state
 *
 * Can also be used as a container element (e.g. <label className="prs-input">)
 * to weld prefix/suffix text alongside a bare <input>.
 */
const Input = forwardRef(function Input(
  { ghost = false, invalid = false, className = "", ...props },
  ref
) {
  const classes = [
    "prs-input",
    ghost && "prs-input-ghost",
    invalid && "prs-input_invalid",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return <input ref={ref} className={classes} {...props} />;
});

export default Input;