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

/**
 * Renders an editable npc row
 */
export const NpcRow = ({ npc }: { npc: Npc }) => {
  async function saveNpcName(name: string) {
    await pb.collection("documents").update(npc.id, {
      data: {
        ...npc.data,
        npc: {
          ...npc.data.npc,
          name,
        },
      },
    });
  }

  async function saveNpcDescription(description: string) {
    await pb.collection("documents").update(npc.id, {
      data: {
        ...npc.data,
        npc: {
          ...npc.data.npc,
          description,
        },
      },
    });
  }

  return (
    <div className="">
      <AutoSaveTextarea
        multiline={false}
        value={npc.data.npc.name}
        onSave={saveNpcName}
      />
      <AutoSaveTextarea
        value={npc.data.npc.description}
        onSave={saveNpcDescription}
      />
    </div>
  );
};