import React from "react";
import { observer } from "mobx-react-lite";
// Import the Doc type from your actual module.
import { Doc } from "../../../../fields/Doc";

export interface ScrapbookContentProps {
  doc: Doc;
}

// A simple view that displays a document's title and content.
// Adjust how you extract the text if your Doc fields are objects.
export const ScrapbookContent: React.FC<ScrapbookContentProps> = observer(({ doc }) => {
  // If doc.title or doc.content are not plain strings, convert them.
  const titleText = doc.title ? doc.title.toString() : "Untitled";
  const contentText = doc.content ? doc.content.toString() : "No content available.";

  return (
    <div className="scrapbook-content">
      <h3>{titleText}</h3>
      <p>{contentText}</p>
    </div>
  );
});