interface CanvasMarkingPopoverProps {
  value?: string;
  placeholder: string;
  onChange: (value: string) => void;
  onClear: () => void;
  onDone: () => void;
}

export function CanvasMarkingPopover({
  value,
  placeholder,
  onChange,
  onClear,
  onDone,
}: CanvasMarkingPopoverProps) {
  return (
    <div
      className="studio-canvas-marking-popover"
      onMouseDown={(event) => event.stopPropagation()}
      onClick={(event) => event.stopPropagation()}
    >
      <textarea
        className="studio-canvas-marking-input"
        placeholder={placeholder}
        value={value || ""}
        onChange={(event) => onChange(event.target.value)}
      />
      <div className="studio-canvas-marking-actions">
        {value ? (
          <button type="button" className="studio-canvas-marking-clear" onClick={onClear}>
            清除
          </button>
        ) : null}
        <button type="button" className="studio-canvas-marking-done" onClick={onDone}>
          完成
        </button>
      </div>
    </div>
  );
}