import { useEffect, useCallback } from "react";
import { Bugpilot, useBugpilot } from "@bugpilot/next";

const App = () => {
  const { saveBugReport, identify } = useBugpilot();

  const user = {
    id: "123",
    email: "jane@bugpilot.io",
    name: ""
  };

  useEffect(() => {
    // example call to identify, this can be called anywhere in your app
    // to update the user's info as soon as it's available or it changes.
    identify(user);
  }, [user.name]);

  const handleClick = useCallback(() => {
    saveBugReport();
  }, []);

  return (
    <Bugpilot
      // Workspace Id (from your Bugpilot Dashboard)
      workspaceId="00000000-0000-0000-0000-000000000000"
      // Optional: user info (you can call identify() anywhere in your app to update this)
      user={user}
      // Optional: pass false to disable Bugpilot (e.g., in staging environments)
      enabled={true}
    >
        {/* Your app code here; Bugpilot will record any unhandled error
            and generate a detailed bug report. Bug reports will be made
            available in your Bugpilot Dashboard under New Issues > Recommended */}

        {/* Optional: add an optional component for users to manually report bugs */}
        <button onClick={handleClick}>Report a Bug</button>
    </Bugpilot>
  );
}