import React from 'react';
import { MessageList } from '@jazzmine-ui/react';
import type { Context, Message } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

export function Messages() {
  const [messages] = React.useState<Message[]>([
    {
      id: 'm-1',
      text: 'How do I reset my password?',
      sender: 'user',
      timestamp: new Date().toISOString(),
    },
    {
      id: 'm-2',
      text: 'Go to Settings > Account and choose Reset password.',
      sender: 'assistant',
      timestamp: new Date().toISOString(),
    },
  ]);
  const [selectedContexts, setSelectedContexts] = React.useState<Context[]>([]);
  const scrollRef = React.useRef<HTMLDivElement | null>(null);

  return (
    <div style={{ height: '60vh' }}>
      <MessageList
        messages={messages} /* Required: message feed data */
        assistantName="Support Assistant" /* Optional: assistant label */
        searchQuery="password" /* Optional: highlight text matches */
        activeSearchMessageId="m-2" /* Optional: focus target match by message id */
        scrollRef={scrollRef} /* Optional: external access to scroll container */
        onAddContext={(context) => {
          /* Optional: capture selected snippets for later send context */
          setSelectedContexts((prev) => [...prev, context]);
        }}
      />

      <pre>{JSON.stringify(selectedContexts, null, 2)}</pre>
    </div>
  );
}