import React from "react";
export function Select({ label, options = [], 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" }}>{label}</span>}
      <div style={{ position: "relative" }}>
        <select
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{
            width: "100%", boxSizing: "border-box", padding: "10px 34px 10px 12px", appearance: "none", WebkitAppearance: "none",
            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: "inset 0 2px 8px rgba(1,6,5,0.6)", cursor: "pointer", ...style
          }}
          {...rest}
        >{options.map((o) => <option key={o} value={o}>{o}</option>)}</select>
        <span style={{ position: "absolute", right: "12px", top: "50%", transform: "translateY(-52%)", color: "var(--rr-gold)", pointerEvents: "none", fontSize: "11px" }}>▾</span>
      </div>
    </label>
  );
}