Question Queue

"use client";

import * as React from "react";
import { QuestionQueue } from "@/components/ui/question-queue";

const now = Date.now();

const initialQuestions = [
  {
    id: "1",
    text: "What is the single biggest change in this release?",
    author: "Priya N.",
    votes: 14,
    voted: false,
    pinned: true,
    createdAt: new Date(now - 2 * 60_000),
  },
  {
    id: "2",
    text: "Will the API keep backward compatibility with v1 clients?",
    votes: 9,
    voted: true,
    createdAt: new Date(now - 6 * 60_000),
  },
  {
    id: "3",
    text: "How do we request a feature for the roadmap?",
    author: "Marcus",
    votes: 5,
    answered: true,
    createdAt: new Date(now - 40 * 60_000),
  },
  {
    id: "4",
    text: "Is there a self-hosted option planned?",
    author: "Dana",
    votes: 2,
    createdAt: new Date(now - 3 * 60 * 60_000),
  },
];

export default function QuestionQueueDemo() {
  const [questions, setQuestions] = React.useState(initialQuestions);

  const handleAsk = (text, options) => {
    const anonymous = options.anonymous;
    setQuestions((prev) => [
      ...prev,
      {
        id: Math.random().toString(36).slice(2),
        text,
        author: anonymous ? undefined : "You",
        votes: 0,
        voted: false,
        createdAt: new Date(),
      },
    ]);
  };

  const handleVote = (id, voted) => {
    setQuestions((prev) =>
      prev.map((question) =>
        question.id === id
          ? { ...question, voted, votes: question.votes + (voted ? 1 : -1) }
          : question,
      ),
    );
  };

  const handleModerate = (id, action) => {
    setQuestions((prev) =>
      prev.map((question) => {
        if (question.id !== id) return question;
        if (action === "answer") return { ...question, answered: true };
        if (action === "reopen") return { ...question, answered: false };
        if (action === "pin") return { ...question, pinned: true };
        if (action === "unpin") return { ...question, pinned: false };
        if (action === "hide") return { ...question, hidden: true };
        return question;
      }),
    );
  };

  return (
    <div className="flex w-full justify-center bg-canvas p-6 text-ink">
      <div className="w-full max-w-xl">
        <QuestionQueue
          questions={questions}
          onAsk={handleAsk}
          onVote={handleVote}
          isHost
          onModerate={handleModerate}
        />
      </div>
    </div>
  );
}