"use client";
import React from 'react';
import { VideoPlayer } from './video-player';
import { ImageViewer } from './image-viewer';
import { MarkdownViewer } from './markdown-viewer';
import { useChat } from '../../providers/chat-provider';
import '../../styles/projector.css';

export function ProjectorView() {
  const { line } = useChat();
  const [content, setContent] = React.useState(null);

  React.useEffect(() => {
    if (!line) return;
    const subscription = line.activity$.subscribe((activity) => {
      if (activity.type === 'event' && activity.name === 'project') {
        setContent(activity.value);
      }
    });
    return () => subscription.unsubscribe();
  }, [line]);

  const renderContent = () => {
    if (!content) return null;
    switch (content.type) {
      case 'video':
        return <VideoPlayer url={content.url} />;
      case 'image':
        return <ImageViewer url={content.url} />;
      case 'markdown':
        return <MarkdownViewer content={content.text} />;
      default:
        return null;
    }
  };

  return <div className="projector-container">{renderContent()}</div>;
}