"use client";

import {
  GrowthBook,
  GrowthBookProvider,
  useFeatureIsOn,
} from "@growthbook/growthbook-react";
import { useEffect } from "react";

const growthbook = new GrowthBook({
  apiHost: "<https://cdn.growthbook.io>",
  clientKey: "sdk-xxxxxxxx",
  enableDevMode: true,
  trackingCallback: (experiment, result) => {
    console.log("Viewed Experiment", {
      experimentId: experiment.key,
      variationId: result.key,
    });
  },
});

const PageTitle = () => {
  const enabled = useFeatureIsOn("test");
  if (!enabled) return null;
  return <h1 className="text-4xl">This is my page title!</h1>;
};

export const PageTitleWithGB = () => {
  useEffect(() => {
    growthbook.loadFeatures();
  }, []);

  return (
    <GrowthBookProvider growthbook={growthbook}>
      <PageTitle />
    </GrowthBookProvider>
  );
};

export default PageTitleWithGB;