import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Scene } from "@/lib/types";

/**
 * Renders an editable scene row
 */
export const SceneRow = ({ scene }: { scene: Scene }) => {
  async function saveScene(text: string) {
    await pb.collection("documents").update(scene.id, {
      data: {
        ...scene.data,
        scene: {
          text,
        },
      },
    });
  }

  return (
    <div className="">
      <AutoSaveTextarea value={scene.data.scene.text} onSave={saveScene} />
    </div>
  );
};