"use client";

import React from "react";
import type { KnowledgeEntryWithTags } from "@mosaic/shared";

interface EntryViewerProps {
  entry: KnowledgeEntryWithTags;
}

/**
 * EntryViewer - Displays rendered markdown content
 */
export function EntryViewer({ entry }: EntryViewerProps) {
  return (
    <div className="entry-viewer">
      <div className="entry-content">
        {entry.contentHtml ? (
          <div
            className="prose prose-sm max-w-none dark:prose-invert"
            dangerouslySetInnerHTML={{ __html: entry.contentHtml }}
          />
        ) : (
          <div className="whitespace-pre-wrap text-gray-700 dark:text-gray-300">
            {entry.content}
          </div>
        )}
      </div>

      {entry.summary && (
        <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
            Summary
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400">{entry.summary}</p>
        </div>
      )}
    </div>
  );
}