import { useState } from "react";
import { useConsole } from "../context";
import { Card, Bar } from "../components/ui";

export default function ApiKeySection() {
  const ctx = useConsole();
  const [input, setInput] = useState("");
  return (
    <Card id="nav-key" title="API Key">
      <Bar>
        <input type="password" placeholder="粘贴你的 X-API-Key（与调 API 用的同一个）" autoComplete="off" value={input} onChange={(e) => setInput(e.target.value)} />
        <button className="primary" onClick={() => { ctx.saveKeyInput(input); setInput(""); }}>保存到本浏览器</button>
        <button onClick={ctx.clearKeyInput}>清除</button>
        <span className="muted">{ctx.keyState}</span>
      </Bar>
      <div><span className="muted">{ctx.quotaText}</span></div>
    </Card>
  );
}