"use client";
import { useEffect, useRef } from "react";

export function Editor({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) {
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (el.innerHTML !== value) el.innerHTML = value || "";
  }, [value]);
  return (
    <div
      ref={ref}
      contentEditable
      onInput={(e) => onChange((e.target as HTMLDivElement).innerHTML)}
      data-placeholder={placeholder}
      style={{
        minHeight: 160,
        border: "1px solid #ddd",
        borderRadius: 6,
        padding: 12,
      }}
      suppressContentEditableWarning
    />
  );
}