import { useState } from "react";
import {
  DeckProvider,
  FeedbackDialog,
  ThumbsFeedback,
} from "@deck-io/feedback";

function App() {
  return (
    <DeckProvider
      publishableKey={process.env.NEXT_PUBLIC_DECK_PUBLISHABLE_KEY!}
      user={{
        id: currentUser.id,
        email: currentUser.email,
        name: currentUser.name,
      }}
    >
      <ProductUi />
    </DeckProvider>
  );
}

function ProductUi() {
  const [open, setOpen] = useState(false);

  return (
    <>
      {/* You own the trigger button */}
      <button type="button" onClick={() => setOpen(true)}>
        Share feedback
      </button>

      <FeedbackDialog
        widgetId="wgt_your_widget_id"
        open={open}
        onOpenChange={setOpen}
        context={{ surface: "settings" }}
      />

      {/* Built-in thumbs; opens the dialog with sentiment pre-set */}
      <ThumbsFeedback
        widgetId="wgt_your_widget_id"
        context={{ messageId: "msg_123" }}
      />
    </>
  );
}

import { createDeckFeedbackClient } from "@deck-io/feedback/server";

const deck = createDeckFeedbackClient({
  publishableKey: process.env.DECK_PUBLISHABLE_KEY!,
});

await deck.submit({
  user: { id: session.userId, email: session.email },
  submission: {
    widgetId: "wgt_your_widget_id",
    sentiment: "negative",
    message: "Checkout failed after payment",
  },
});