"use client";

import { SuggestedQuestions } from "@llamaindex/chat-ui/widgets";
import { getAnnotationData, Message, useChatUI } from "@llamaindex/chat-ui";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export const ChatFurtherQuestions: React.FC<{ message: Message }> = ({
  message,
}) => {
  const annotations: string[][] = getAnnotationData(
    message,
    "FURTHER_QUESTIONS",
  );
  const { append, requestData } = useChatUI();

  if (annotations.length !== 1 || annotations[0].length === 0) {
    return <></>;
  }

  return (
    <Accordion
      type="single"
      collapsible
      className="w-full border rounded-md bg-card shadow-sm"
    >
      <AccordionItem value="suggested-questions" className="border-0">
        <AccordionTrigger className="px-4 py-3 text-sm font-medium text-foreground transition-colors">
          Further Suggested Questions
        </AccordionTrigger>
        <AccordionContent className="px-4 pb-4 pt-0">
          <SuggestedQuestions
            questions={annotations[0]}
            append={append}
            requestData={requestData}
          />
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};