import React from "react";

export function Input({ size = "default", invalid = false, startAddon, endAddon, className = "", wrapperClassName = "", ...props }) {
  const cls = ["o-input", size !== "default" ? "o-input--" + size : "", wrapperClassName].filter(Boolean).join(" ");
  return (
    <span className={cls} data-slot="input-control" data-size={size} data-invalid={invalid ? "" : undefined}>
      {startAddon ? <span className="o-input__addon o-input__addon--start">{startAddon}</span> : null}
      <input className={["o-input__control", className].filter(Boolean).join(" ")} data-slot="input" aria-invalid={invalid || undefined} {...props} />
      {endAddon ? <span className="o-input__addon o-input__addon--end">{endAddon}</span> : null}
    </span>
  );
}
