// Thaipat Quotation — shared UI components

// ---------- Button --------------------------------------------------------
function Button({ variant = "primary", arrow = false, disabled = false, onClick, children }) {
  const cls = {
    primary: "btn btn--primary",
    ghost: "btn btn--ghost",
  }[variant] || "btn btn--primary";
  return (
    <button className={cls} disabled={disabled} onClick={onClick}>
      {children}
      {arrow && <span className="btn-arrow">→</span>}
    </button>
  );
}

// ---------- Field (input + label) -----------------------------------------
function Field({ label, value, onChange, placeholder, type = "text", required = false, fullWidth = false, readOnly = false, error = "" }) {
  return (
    <div className={"field" + (fullWidth ? " field--full" : "")}>
      <label className="field__label">{label}</label>
      <input
        className={"field__input" + (error ? " field__input--error" : "")}
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        readOnly={readOnly}
        required={required}
      />
      {error && <div className="field__help field__help--error">{error}</div>}
    </div>
  );
}

// ---------- Logo ----------------------------------------------------------
function AppLogo() {
  return (
    <div className="app-logo" onClick={() => window.location.reload()}>
      <img src="assets/logo-mark.png" alt="Thaipat Metal" />
      <span className="app-logo__text">ไทยพัฒน์เมทัล</span>
    </div>
  );
}

// ---------- Spinner -------------------------------------------------------
function Spinner() {
  return <div className="spinner"></div>;
}

Object.assign(window, { Button, Field, AppLogo, Spinner });