import React from "react";
import { ensureStyle, ensureControlBase } from "./controlBase";

ensureControlBase();
ensureStyle("at-input", `
  .at-input--numeric{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:0;text-align:right}
  .at-input-group{display:flex;align-items:center;gap:6px;padding:0 9px}
  .at-input-group svg{width:14px;height:14px;color:var(--fg-4);flex:0 0 14px}
  .at-input-group input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:inherit;
    font-size:13px;line-height:18px;color:var(--fg-2);padding:6px 0}
  .at-input-group input::placeholder{color:var(--fg-4)}
`);

export function Input({ variant = "default", icon = null, error = false, disabled = false, className = "", ...rest }) {
  if (icon) {
    const wrap = ["at-control", "at-input-group", error ? "is-error" : "", disabled ? "is-disabled" : "", className].filter(Boolean).join(" ");
    return (
      <span className={wrap}>
        {icon}
        <input disabled={disabled} {...rest} />
      </span>
    );
  }
  const cls = [
    "at-control",
    "at-input",
    variant === "numeric" ? "at-input--numeric" : "",
    error ? "is-error" : "",
    className,
  ].filter(Boolean).join(" ");
  return <input className={cls} disabled={disabled} aria-invalid={error ? "true" : undefined} {...rest} />;
}