import { useEffect, useState } from "react";
import { initializeTetrons, isApiKeyValid, EditorContent } from "tetrons";
import "tetrons/style.css";

function App() {
  const apiKey = "YOUR_API_KEY";

  const [loading, setLoading] = useState(true);
  const [isValid, setIsValid] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    async function validate() {
      try {
        await initializeTetrons(apiKey);
        setIsValid(isApiKeyValid());
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    validate();
  }, [apiKey]);

  if (loading) {
    return <div>🔍 Validating API key...</div>;
  }

  if (!isValid) {
    return <div style={{ color: "red" }}>❌ API Key Invalid: {error}</div>;
  }

  return (
    <div style={{ padding: "2rem" }}>
      <h1>Editor from Tetrons Package</h1>
      <EditorContent apiKey={apiKey} />
    </div>
  );
}

export default App;