"use client";

import Head from "next/head";
import * as Sentry from "@sentry/nextjs";

export default function SentryExamplePage() {
  return (
    <div>
      <Head>
        <title>Sentry Onboarding</title>
        <meta name="description" content="Test Sentry for your Next.js app!" />
      </Head>

      <main
        style={{
          minHeight: "100vh",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          padding: "2rem",
        }}
      >
        <h1 style={{ fontSize: "2rem", fontWeight: "bold", marginBottom: "1rem" }}>
          Sentry Onboarding
        </h1>
        <p style={{ marginBottom: "1rem" }}>
          Get started by sending us a sample error:
        </p>
        <button
          type="button"
          style={{
            padding: "0.5rem 1rem",
            backgroundColor: "#0070f3",
            color: "white",
            border: "none",
            borderRadius: "0.25rem",
            cursor: "pointer",
          }}
          onClick={async () => {
            Sentry.captureException(new Error("This is your first error!"));

            try {
              const res = await fetch("/api/sentry-example-api");
              if (!res.ok) {
                throw new Error("Sentry Example API Error");
              }
            } catch (err) {
              Sentry.captureException(err);
            }
          }}
        >
          Throw error!
        </button>

        <p style={{ marginTop: "2rem", fontSize: "0.875rem", color: "#666" }}>
          Next, look for the error on the{" "}
          <a
            style={{ color: "#0070f3", textDecoration: "underline" }}
            href="https://dk0.sentry.io/issues/?project=4510751388926032"
            target="_blank"
            rel="noopener noreferrer"
          >
            Issues Page
          </a>
        </p>
        <p style={{ fontSize: "0.875rem", color: "#666" }}>
          For more information, see{" "}
          <a
            style={{ color: "#0070f3", textDecoration: "underline" }}
            href="https://docs.sentry.io/platforms/javascript/guides/nextjs/"
            target="_blank"
            rel="noopener noreferrer"
          >
            https://docs.sentry.io/platforms/javascript/guides/nextjs/
          </a>
        </p>
      </main>
    </div>
  );
}
