import React from "react";
export function Input({ label, hint, style, ...rest }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: "block", fontFamily: "var(--font-sans)" }}>
      {label && <span style={{ display: "block", fontSize: "11px", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: focus ? "var(--rr-gold)" : "var(--rr-muted)", marginBottom: "6px", transition: "color 160ms" }}>{label}</span>}
      <input
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          width: "100%", boxSizing: "border-box", padding: "10px 12px",
          background: "var(--bg-deep)", color: "var(--fg)",
          border: "1px solid " + (focus ? "var(--rr-gold)" : "var(--border)"),
          borderRadius: "var(--radius-md)", fontFamily: "var(--font-sans)", fontSize: "14px",
          outline: "none", boxShadow: focus ? "0 0 0 1px var(--rr-gold-soft), inset 0 2px 8px rgba(1,6,5,0.6)" : "inset 0 2px 8px rgba(1,6,5,0.6)",
          transition: "border-color 160ms, box-shadow 160ms", ...style
        }}
        {...rest}
      />
      {hint && <span style={{ display: "block", fontSize: "12px", color: "var(--fg-soft)", marginTop: "5px" }}>{hint}</span>}
    </label>
  );
}